css居中

来源：互联网发布：监控与数据采集编辑：程序博客网时间：2024/05/18 02:56

主要介绍四种居中方式，比较常用的：

1.margin：0 auto；

2.line-height;text-align:center;

3.table演变的居中

4.利用伸缩盒子box

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>    html,body    {    margin:0;    padding:0;    }.contian{width:100%;height:100px;background-color: blue;            min-width: 980px;}.header{width:80%;height:100px;background-color:yellow;min-width: 980px;margin:0 auto;            text-align: center;}ul{line-height: 100px;}ul li{display: inline-block;}</style></head><body><div class="contian"><div class="header"><ul><li>列表</li><li>列表</li><li>列表</li><li>列表</li></ul></div></div></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>    html,body    {    margin:0;    padding:0;    }.contian{   display:table;/*显示成表格*/width:100%;height:100px;background-color: blue;            min-width: 980px;}p{   display: table-cell;/*显示成单元格*/background-color:yellow;            text-align: center;            vertical-align:middle;}</style></head><body><div class="contian"><p>呵呵呵</p></div></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.outer{width: 500px;height: 400px;background-color: #ddeeff;display: -webkit-box;-webkit-box-pack:center;/*水平居中*/-webkit-box-align:center;/*垂直居中*/}.inner{width: 300px;height: 200px;background-color: #ccee33;display: -webkit-box;-webkit-box-pack:center;/*水平居中*/-webkit-box-align:center;/*垂直居中*/}</style></head><body><div class="outer"><div class="inner">独立之精神，<br>自由之思想。</div></div></body></html>

第一个代码包含一二

阅读全文

0 0