前言
以下将针对CSS常见的居中及布局问题进行讲解,主要以float及对position的两种方法进行讲解。
左右、左中右布局
- float
利用float: left, float:right设置左右布局,然后通过clearfix清除浮动。
/* HTML代码 */
<div class="float_parent">
<div class="clearfix">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</div>
</div>
/* CSS 代码 */
.left {
border: 1px solid lightcoral;
background: lightcoral;
float: left;
height: 100px;
width: 100px;
}
.right {
border: 1px solid palegreen;
background: palegreen;
float: left;
height: 100px;
width: 100px;
}
.middle{
border: 1px solid orange;
background: orange;
float: left;
height: 100px;
width: 100px;
}
- position
设置父元素位置为position: relative, 需要左中右布局的元素设置position:absolute,以及top/left或right属性。
代码如下:
/* HTML 代码 */
<div class="position_parent">
<div class="pos_left">
</div>
<div class="pos_middle">
</div>
<div class="pos_right">
</div>
</div>
/* CSS 代码 */
.position_parent {
position: relative;
}
.pos_left {
border: 1px solid lightcoral;
background: lightcoral;
height: 100px;
width: 100px;
position: absolute;
top: 200px;
left: 0px;
}
.pos_right {
border: 1px solid rgb(103, 240, 126);
background: rgb(103, 240, 126);
height: 100px;
width: 100px;
position: absolute;
top: 200px;
left: 204px;
}
.pos_middle {
border: 1px solid orange;
background: orange;
height: 100px;
width: 100px;
position: absolute;
top: 200px;
left: 102px;
}
水平、垂直居中
- 对于行内元素的水平居中,只设置inline元素display: inline-block,然后设置其父级元素(父级元素需要为text-align: center,即可实现元素的水平居中。
要设置垂直居中,一般可设置vertical-align: top
对于块级元素的水平居中,只需将其margin-left, margin-right设置为auto; 多个块级元素可以将其设置为inline-block,然后套用方法1
垂直居中
--绝对定位时可以设置top, left各为50%,结合margin负实现元素的垂直居中或者top, bottom, left, right为0,margin auto。
--父元素高度确定的单行文本,可以设置height=line-height实现
--对于inline-block元素,有时可设置vertical-align: middle使元素居中
*小技巧:
- 利用CSS3的属性,如transform实现居中
.container{
position:relative;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 利用table-cell
display:table-cell;
vertical-align:middle;
text-align:center;
- Flex布局(针对新浏览器等)
.center{
display:flex;/*Flex布局*/
display: -webkit-flex; /* Safari */
align-items:center;/*指定垂直居中*/
}
4. :before
其他可参考[知乎](https://www.zhihu.com/question/20543196)