html高度百分比居中,HTML+CSS入门 百分比宽高div居中并垂直居中问题解读

本篇教程介绍了HTML+CSS入门 百分比宽高div居中并垂直居中问题解读，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

html>

关于div居中

html,

body {

height: 100%;

}

.div1 {

width: 60%;

height: 40%;

border: 1px solid #000000;

}

.div2 {

width: 40%;

height: 45%;

background-color: green;

}

一、绝对定位

.div1 {

position: relative;

}

.div2 {

margin: auto;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

二、translate

.div2 {

position: relative;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

三、flex

.div1 {

display: flex;

justify-content: center;

align-items: center;

}

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！