居中效果
阿新 • • 發佈：2017-06-23
ner ber htm -a contain 前端 水平居中 一半 css
普通div和html混寫可以這樣寫，設置
-
text-align:center，
-
margin:0px auto
最簡單的方法就是 把你的body這樣設置：
<body style="text-align:center;">
<div style="margin:0px auto"></div>
</body>
或者直接設置css文件。在文件裏面這樣寫
<style>
#content{ width:778px; margin:0 auto; text-align:center;}
</style>
<div id="content">看看是不是居中了</div>
水平居中的text-align:center 和 margin:0 auto
這兩種方法都是用來水平居中的，前者是針對父元素進行設置而後者則是對子元素。他們起作用的首要條件是子元素必須沒有被float影響，否則一切都是無用功。margin:0 auto
也可以被寫成margin:0 auto 0 auto。不能理解的童鞋們可以自己去找找關於css縮寫的內容。
垂直居中的line-height
什麽？！margin在垂直居中裏不起作用了？顯然事情確實如此，我們僅有margin:0 auto的用法而沒有auto 0的情況。至於line-height，他也是作用在父元素上，當他的值等於父元素的height值時，內部的文字就會自動的垂直居中了。此處好像僅僅只能是文字而已，遺憾。
萬能的position大法
這個方法可以說真的是萬能的。當你為一個元素無法居中而困擾的時候，可以果斷的使用他，而且幾乎沒有後遺癥，絕對是前端工程師們居家旅行必備的手段之一。
具體的做法很簡單，首先給父元素寫上positon:relative，這麽做是為了給子元素打上position:absolute的時候不會被定位到外太空去。接下去，寫上子元素的height和width，這個似乎是必須的
，某些瀏覽器在解析的時候如果沒有這2個值的話會出現意想不到的錯位。接著就是整個方法的核心，給子元素再打上top:50%;left:50%以及margin-top:一半的height值的的負數;margin- left:一半的weight值的負數。整理一下之後，可能你會給你的子元素寫上這樣的css（當然，父元素也要先寫上width和height）
{width:100px;height:80px;position:absolute;top:50%;left:50%;margin-left:50px;margin-top:40px}
|
居中效果