css3 - div 水平垂直置中

问题描述

问 题

想請問一下如何讓div水平垂直置中?
就是不管中間的div大小 他能隨著瀏覽器大小自動置中對齊???

解决方案

每种写法都会根据你的布局进行一些小小变化。
常用margin水平方法：

div { 
    width:200px;
    margin:0 auto;
}

1/2宽高的margin，50%的left、top方法：

div {        
    Width:500px ; 
    height:300px;      
    Margin: -150px 0 0 -250px;        
    position:relative;       
    background-color:pink;      
    left:50%;
    top:50%;     
}

LTRB值为0的方法：

div { 
    width: 400px;
    height: 300px; 
    margin:auto;
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
}

transform方法

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

带文本元素的话，让line-height = height：

p {
    height:30px;
    line-height:30px;
    text-align:center;
}

flex弹性盒子布局居中,给父元素添加：

div {
    display: flex;
    flex-flow: row wrap;
    width: 408px; 
    align-items: center; 
    justify-content: center;
} 

这篇关于css3 - div 水平垂直置中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！