居中
1. 文字居中
- 水平居中:
text-align: center - 垂直居中:
vertical-align: middle
2. div 居中
div 居中是一个比较坑的实现, 没有什么特别优秀的办法, 这里只举部分较实用的例子.
具体方法可以参考知乎上的这一篇回答, 这里暂时只介绍其中 absolute 的使用.
2.1 absolute 居中
// 假设我们要做一个 200px 见方的 div
.middle {
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background:red;
}
这是一个比较稳妥的实现, 这里很明显, 是通过 top: 50% 来实现的垂直居中, 不过如果单单使用 top=50%, 会发现 div 的顶部位于父级元素 50% 位置处, 所以需要使用 margin-top=-100px 来实现元素的便宜. 该示例中的水平居中方法同理.
如果在确认设置无误的情况下, 发现 div 的位置不对, 请检查父级是否正确设置了 position: relative.
网友评论