CSS中的垂直和水平居中完全指南

2024-07-11 08:30:03

字体：大中小

来源：转载

供稿：网友

CSS Code复制内容到剪贴板

居中一直是CSS中被抱怨的典型。为什么实现起来这么辛苦？所以有人被嘲笑。我觉得问题不是没有办法做到，只是视情况而定，有很多不同方式，但是很难弄清楚应该用何种方式。因此我写了这篇文章，希望能把他变得容易点。
　水平居中
　　内联元素（inline or inline-*）居中?

　　你可以让他相对父级块级元素居中对齐

CSS Code复制内容到剪贴板

　　块级元素（block level）居中?

　　你可以通过设置margin-left和margin-right为auto让它居中（同时还要设置width，否则它就会承满整个容器，无法看出居中效果），如。

CSS Code复制内容到剪贴板

.center-me { margin: 0 <span style="width: auto; height: auto; float: none;" id="8_nwp"><a style="text-decoration: none;" mpid="8" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f3e358418dc3f42b&k=auto&k0=auto&kdi0=0&luki=3&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=2bf4c38d4158e3f3&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5106%2Ehtml&urlid=0" id="8_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">auto</span></a></span>;
}

　　如果有很多块级元素呢？

　　如果你有很匀块级元素需要水平居中成一行，你最好使用一个不同的display类型。这是一个使用inline-block和flex的例子。

CSS Code复制内容到剪贴板