Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡單實(shí)例
發(fā)布時間:2016-07-27 10:32:01 作者:佚名
我要評論

下面小編就為大家?guī)硪黄狥lexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡單實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
Flexbox實(shí)現(xiàn)一個div元素在body頁面中水平垂直居中:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8"/>
- <title>Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中</title>
- <style type="text/css">
- html {
- height: 100%;
- }
- body {
- display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
- display: -moz-box; /* 老版本語法: Firefox (buggy) */
- display: -ms-flexbox; /* 混合版本語法: IE 10 */
- display: -webkit-flex; /* 新版本語法: Chrome 21+ */
- display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */
- /*垂直居中*/
- /*老版本語法*/
- -webkit-box-align: center;
- -moz-box-align: center;
- /*混合版本語法*/
- -ms-flex-align: center;
- /*新版本語法*/
- -webkit-align-items: center;
- align-items: center;
- /*水平居中*/
- /*老版本語法*/
- -webkit-box-pack: center;
- -moz-box-pack: center;
- /*混合版本語法*/
- -ms-flex-pack: center;
- /*新版本語法*/
- -webkit-justify-content: center;
- justify-content: center;
- margin: 0;
- height: 100%;
- width: 100% /* needed for Firefox */
- }
- /*實(shí)現(xiàn)文本垂直居中*/
- .box {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -webkit-box-align: center;
- -moz-box-align: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- width:500px;
- height: 200px;
- background: red;
- color: #fff;
- font-weight: bold;
- font-size: 30px;
- }
- </style>
- </head>
- <body>
- <div class="box">Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中</div>
- </body>
- </html>
以上這篇Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
原文地址:http://www.cnblogs.com/dearxinli/p/5674227.html
相關(guān)文章
- 這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法,有興趣的可以了解一下。2016-12-19
- 這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-17
利用CSS3的flexbox實(shí)現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個小節(jié)的內(nèi)容,其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實(shí)現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局,有需要的可以參考2016-09-12- 這篇文章給大家演示了在不知道高度的情況下圖片如何垂直居中對齊,文中給出了實(shí)例代碼,有需要的朋友們可以參考借鑒。下面來一起看看吧。2016-09-12
深入理解CSS行高line-height與文本垂直居中的原理
本文詳細(xì)介紹了CSS行高屬性line-height與文本垂直居中的原理,通過本文的介紹相信對大家以后使用line-height和設(shè)置文本垂直居中會更加熟練,有需要的可以參考借鑒。下面一2016-08-12CSS設(shè)置DIV垂直居中的N種方法 兼容IE瀏覽器
這篇文章主要為大家詳細(xì)介紹了兼容IE瀏覽器CSS設(shè)置DIV垂直居中的N種方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-05- 這篇文章主要介紹了CSS文本和div垂直居中方法總結(jié),包括多行文本垂直居中,單行文本垂直居中,子div垂直居中,感興趣的小伙伴們可以參考一下2016-07-04
CSS 實(shí)現(xiàn)垂直居中的幾種方法(必看)
下面小編就為大家?guī)硪黄狢SS 實(shí)現(xiàn)垂直居中的幾種方法(必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-14CSS在固定寬高的div內(nèi)實(shí)現(xiàn)垂直居中的實(shí)例詳解
這篇文章主要介紹了CSS在固定寬高的div內(nèi)實(shí)現(xiàn)垂直居中的實(shí)例詳解,即在div內(nèi)部元素相對于div垂直居中的方法,需要的朋友可以參考下2016-06-03CSS實(shí)現(xiàn)垂直居中的幾種方法小結(jié)
在前端布局過程中,我們實(shí)現(xiàn)水平居中比較簡單,一般通過margin:0 auto;和父元素 text-align: center;就能實(shí)現(xiàn)。今天小編給大家?guī)砹薈SS實(shí)現(xiàn)垂直居中的幾種方法小結(jié),感興2019-05-14