css 子元素div(已知宽高、未知宽高)垂直居中父元素div
一、已知子元素div宽度和高度
1、子绝父相(子元素绝对定位,父元素相对定位)
2、left:50% top:50%
3、margin-left:自己宽度一半 margin-top:自己高度一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子div水平垂直居中</title>
<style>
.outer {
width: 200px;
height: 200px;
background: pink;
position: relative;
}
.inner {
width: 50px;
height: 50px;
background: green;
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">