首页 > 代码库 > div和css：行内元素和块元素的水平和垂直居中

div和css：行内元素和块元素的水平和垂直居中

2024-08-18 07:51:08   217人阅读

行内元素：

水平居中：text-align:center

ul水平居中:加
display:table;
margin:0 auto;
此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

垂直居中：line-height:父元素的height

块元素：

水平居中：

①margin:0 auto

例：
.father{
    width:200px;
    height:200px;
    background-color:red;
    }
.son{
    width:100px;
    height:100px;
    background-color:black;
    margin:0 auto;
    }

0指上下外边距为0，auto指左右外边距自适应，此时水平居中。（该方法不适用于垂直居中） 这种方法不适用于通屏，即若子元素溢出，则在父元素中不居中

②position:relative/absolute/fixed

relative:相对定位，保留初始位置（即不浮动）

特点：1.不影响元素本身特性
      2.不使元素脱离文档流（不浮动）
      3.可以不设定偏移量，此时位置不会发生变化
      4.该元素是相对于自己本身位置的偏移量。

absolute:绝对定位，不保留初始位置

特点：1.元素完全脱离文档流（浮动）
      2.使内联元素支持宽和高
      3.让块标签内容撑开宽高
      4.相对父元素偏移，且逐层查找，直到document，若父元素没有position:relative属性，则继续向上找，直到document,即相对于浏览器左上角。
      5.提升层级，即盖在其他未用该属性的元素上，或者在他之前使用该属性的元素上。（优先级可以用z-index设置，值越大，优先级越高，但是若父元素，即使用position:relative的元素也被覆盖，则没有用）

fixed:相对于视窗定位，即不管滑轮向下还是向上拉，该元素位置始终不变。（IE6以下不兼容）

<style>
.test{
	width:200px;
	height:100px;
	background-color:yellow;
}
.test1{
	width:200px;
	height:100px;
	background-color:green;
	position:relative;
	left:50%;
	margin-left:-100px; <!--子元素的height的一半-->
}
.test2{
	width:200px;
	height:100px;
	background-color:blue;
}
.test3{
	width:200px;
	height:100px;
	background-color:red;
}
</style>
</head>

<body>
<div class="test">
</div>
<div class="test1">
</div>
<div class="test2">
</div>
<div class="test3">
</div>

(插不了图片。。。我口述吧。。) 就是保留了图片本来的的位置，而图片移动到了屏幕中央的位置。 若将上面test2的position改为absolute，则浮动，图片2本来的位置被test3覆盖 用上面position，left，margin-left三个属性也可以使div水平居中（垂直居中将left改为top即可） 这种方法适用于通屏，即若子元素溢出，则在父元素中也居中。

优点：不用知道父元素的width

垂直居中：

①设置父元素的padding

缺点：需要知道父元素的width值

②上述水平方法第二个，将left改为top

③绝对居中（即水平，垂直都居中）

实现方法：父元素相对定位，子元素绝对定位，在子元素中添加属性

{
    margin:auto;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

该方法不浮动，但也存在不通屏的问题。

div和css：行内元素和块元素的水平和垂直居中


联系
我们