css实现水平/垂直方向居中
在开始介绍如何实现水平/垂直方向居中之前，需要先介绍一下行内元素和块级元素
行内元素的特点就是
- 和其他元素在同一行
- 可以设置
padding,margin,line-height - 宽高由内容撑开，不能自己设置宽高
- 行内元素只能容纳文本或其他行内元素
- 常见的内联样式:
a,img,input,select,span,textarea,font
块级元素
- 总是在新行上开始，占据一整行
- 高度，行高以及内外边距都能设置
- 宽度和高度可以随意设置
- 可以容纳块级元素或者行内元素
- 常用的块级元素:
div,p,table,form,h标签,dl,ol,ul,li
居中方式一共分为:水平居中，垂直居中，水平垂直居中
1.水平居中
1.1 行内元素的水平居中
利用text-align:center可以实现在块级元素内部的行内元素水平居中。
此方法对行内元素(inline),行内块(inline-block),行内表(inline-block),inline-flex元素水平居中都有效。
1.2 块级元素水平居中
可以通过把固定宽高的块级元素的 margin-top 和 margin-right 设为auto，就可以试块级元素水平居中了。
<div>
<p class="center-block">哈哈哈哈哈</p>
</div>
div {
height:100px;
border:2px dashed #f69c55;
}
.center-block {
margin:0 auto;
width:8rem;
}
需要注意的是，需要居中的元素是必须要设置宽度的。
1.3 多块级元素水平居中
实现的条件就是利用 inline-block ，通过这个属性，可以让元素变成一个行内块级元素。然后利用 text-align 的值为 center 设置即可
还有一种方式就是利用flex布局，通过设置justify-content: center;就可以了。
flex的教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
2.垂直居中
2.1 单行行内元素垂直居中
通过设置内联元素的高度和行高相等，从而使行内元素居中
.box{
height:12px;
line-height:12px;
}
2.2 多行元素垂直居中
利用表格布局vertical-align: middle 可以实现子元素的垂直居中
.farther{
display:table;
}
.children {
display:table-cell;
vertical-align:middle;
}
利用flex布局，也是可以完成的。之后我将不再写出来，因为flex布局，可以实现上面的所有居中排列。详细就去看flex的教程就好了。
2.3 块级元素垂直居中
如果已知居中元素的高度和款读，垂直居中就比较容易了，可以通过绝对定位的50%来实现。具体代码如下
.farther {
height:140px;
position:relative;
}
.children {
position:absolute;
top:50%;
height:100px;
/* 这里的margin-top 是为了减掉元素本身的一半，让他可以居中*/
margin-top: -50px;
}
如果是未知高度的块级元素，可以借助css3 的 transform属性向Y轴反向偏移50%，实现垂直居中
.farther {
height:140px;
position:relative;
}
.children {
position: absolute;
top:50%;
transform: translateY(-50%);
}
3 水平垂直居中
通过 margin 平移元素整体宽度的一半，使元素水平垂直居中。
.father {
height: 140px;
position: relative;
}
.children {
width:200px;
height: 80px;
position:absolute;
top:50%;
left:50%;
margin: -40px 0 0 -100px;
}
3.2 未知宽高元素的水平垂直居中
利用2D变换，在水平和垂直方向都反向平移宽高的一半，从而使元素水平居中垂直。
.farther {
height:140px;
position:relative;
}
.children {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
最后还有就是用flex
以上
网友评论