前端布局垂直居中的几种方法

时间 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;}