各种水平居中、垂直居中展示

来源：互联网发布：js pop 编辑：程序博客网时间：2024/05/22 07:52

最好用的垂直居中方法

将行高line-height的值设置与块的height相等，就可以实现垂直居中！在这篇看到的，介绍的很详细，可以看看：http://www.cnblogs.com/xinxingyu/p/4665386.html

.blogTitle /*一个div块*/{height:90px;width:250px;background-color:#ffff00;float:left;text-align:center; /*块内水平居中*/line-height:90px;  /*快内垂直居中*/}

各种水平居中、垂直居中展示

<!DOCTYPE html><html><head><meta charset="gb2312"><title>各种居中测试</title><style type="text/css">.test1,.test2,.test3{height: 100px;background-color: #ccc000;margin-top: 20px;}ul{list-style: none;padding: 0;margin: 0;overflow: hidden;width: 360px;}ul li{height: 20px;width: 100px;background-color: #00aaaa;float: left;margin-right: 20px;text-align: center;}.test1 ul{margin: 0 auto;}.test2{position: relative;}.test2 ul{position: absolute;left: 0;top: 50%;transform:translate(0,-50%);}.test3{position: relative;}.test3 ul{position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);}</style></head><body><div class="test1">    <ul>        <li>水平居中</li>        <li>水平居中</li>        <li>水平居中</li>    </ul></div><div class="test2">    <ul>        <li>垂直居中</li>        <li>垂直居中</li>        <li>垂直居中</li>    </ul></div><div class="test3">    <ul>        <li>水平垂直居中</li>        <li>水平垂直居中</li>        <li>水平垂直居中</li>    </ul></div></body></html>

output：

另一种普遍方法

<ul>中设置display:inline-block; 在父级元素中设置text-align:center;

.nav{width:100%;height:90px;background-color:#ff0000;text-align:center;}.nav ul{list-style-type:none;margin:0;padding:0;display:inline-block;}

阅读全文

0 0