css3 - div 水平垂直置中
黄舟
黄舟 2017-04-17 11:48:46
0
7
576

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

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

모든 응답(7)
刘奇

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

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

1/2宽高的margin,50%的left、top方法:

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

LTRB值为0的方法:

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

transform方法

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

带文本元素的话,让line-height = height:

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

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

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

css3方法可以用flex,给父级添加

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}
迷茫
p {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
巴扎黑

父元素设置为relative定位,本元素设置为绝对定位,然后通过top和translateY使其垂直居中

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
巴扎黑

margin:auto

洪涛

http://web.jobbole.com/83384/

巴扎黑

外面的p{

position: relative;

}
中间的p{

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

}

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!