垂直居中方法总结
<style>#box{position: absolute;margin: auto;top:0px;right: 0px;bottom: 0px;left: 0px;width: 100%;height: 30%;background-color: red;text-align: center;}
</style>
<body><div id="box"><h1>文字居中</h1></div>
</body>
第一種的好處是不用知道垂直居中的元素的高寬，但是必須設(shè)置元素的寬高！然后通過margin：auto;來達(dá)到效果。
<style>#box{position: absolute;top:50%;left:50%;transform:translate3d(-50%,50%,0);background-color: red;text-align: center;} </style> <body><div id="box"><h1>文字居中</h1></div> </body>
這種的好處是寬高不用定義！
<style>.box{ display: flex; height: 400px; align-items:center; justify-content:center;background: #0099cc } h1{ display: flex; align-items:center; justify-content:center;} </style> <body><div class="box"> <h1>實(shí)現(xiàn)元素水平居中</h1> </div> </body>
想要讓那個(gè)元素居中，就在其父元素加 display:flex;justify-content:center;align-items:center;
按照原理，往body里設(shè)置這3個(gè)樣式，就能按body垂直居中，但是沒有，是因?yàn)閎ody的默認(rèn)高度為0px;在給個(gè)height:600px;就會(huì)有效果的！
<style>#container{position: absolute;top:0px;right: 0px;bottom: 0px;left: 0px;display: flex;justify-content:center;align-items:center;}.box{ display: flex; height: 400px; align-items:center; justify-content:center;background: #0099cc } h1{ display: flex; align-items:center; justify-content:center;} </style> <body><div id="container"><div class="box"> <h1>實(shí)現(xiàn)元素水平居中</h1> </div></div> </body>
對(duì)于移動(dòng)端，這是我常用的一種方法，這樣屏幕的寬高就都有了！
?
轉(zhuǎn)載于:https://www.cnblogs.com/luguiqing/p/6506004.html
總結(jié)
- 上一篇： 汽车保养用品
- 下一篇： 各种组件的js 获取值 / js动态赋值