前端佈局垂直居中的幾種方法

時間 2019-11-24

標籤前端佈局垂直居中幾種方法简体版

原文原文鏈接

（1）flex佈局
HTML代碼佈局

<div class="layoutbox">
    <div class="layout">我是垂直居中的元素</div>
</div>

CSS代碼flex

.layoutbox{display: flex; align-items: center;justify-content:center; height: 500px; border:1px solid #000;}
.layout{width:200px;height:200px;border:1px solid #000;}

其中layout中的寬高能夠不用設置，不固定寬高
（2）CSS3 transform方法
HTML代碼spa

<body>    
     <div class="layout1">我是CSS3垂直居中的元素</div>
</body>

CSS代碼code

body{background:#a6c1f7;}
.layout1{width: 150px;border:1px solid #000;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

（3）兩列不定寬flex佈局 orm

HTML代碼blog

<div class="widthbox">
    <div class="left">我是左邊fffff</div>
    <div class="right">我是右邊</div>
</div>

CSS代碼it

.widthbox{display: flex; flex-flow:row nowrap;}
.left{background:#c5f5e2;height:300px;}
.right{background:#e9f5c5; flex-grow: 1; height:300px;}

相關標籤/搜索