css实现div，文字水平居中的方案。

　　本文的目的为记录个人开发中常用的几种居中方案，以供大家参考。　　

　　//basic css

　　html, body {
　　　　height: 100%;
　　　　width: 100%;
　　　　margin: 0;
　　　　padding: 0;
　　}

　　************************************************居中相关************************************************
　　假设div的宽高均为100px。
　　1.div水平居中，直接使用margin:0 auto;

　　2.使用绝对定位让div水平垂直居中。(若想要div在某个特定的容器中水平垂直居中，则需要把容器的position设置为relative)
　　.div {
　　　　position: absolute;
　　　　top: 50%;
　　　　left: 50%;
　　　　height: 100px;
　　　　width: 100px;
　　　　margin: -50px 0 0 -50px;
　　}

　　3.使用相对定位让div水平垂直居中。
　　.div {
　　　　position: relative;
　　　　margin: 0 auto;
　　　　top: 50%;
　　　　transform: translateY(-50%);
　　}

　　4.文字的水平居中，直接设置容器text-align: center;

　　5.文字的水平垂直居中, 设置容器text-align: center; line-height: 容器的高度;

　　************************************************居中相关************************************************

巴特西

css实现div，文字水平居中的方案。

最新文章

热门文章