【css技术指南笔记】css居中

 让没有固定 width 的元素居中：

<nav class="menu">
    <ul>
        <li> li1 </li>
        <li> li2 </li>
    </ul>
</nav>

.menu{
    text-align:center;
}
ul{
    dispaly:inline-block;
}

ul 里的 li 是会动态生成的，所以没有办法固定 ul 的 width

 垂直居中：

在固定 height 居中文本：

{
    text-align:center;//水平居中
    line-height:300px;//设置行高为容器的高度实现垂直居中，在 chrome 中测试，line-height:100% 不能居中
}

其他元素垂直居中，例如图片，为图片的容器应用如下样式

{
    display:table-cell;//
    vertical-align:middle;//次属性只对 table-cell 有效
    text-align:center;//水平居中
}

转载于:https://my.oschina.net/zhenger/blog/405645