<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>居中问题</title>
<style>
.box{
width: 400px;
height: 400px;
background-color: pink;
/* 方法1 */
/* overflow: hidden; */
/* 方法2 */
/* padding: 100px 100px;
box-sizing: border-box; */
/* 给父元素加padding 父元素转换为ie盒模型*/
/* 方法3 */
/* display: flex;
justify-content: center;
align-items: center; */
/* 方法4 */
/* position: relative; */
/* 设置相对定位 子元素相对于父元素定位 */
/* 方法5 */
/* position: relative; */
/* 方法6 */
/* display: table-cell;
text-align: center;
vertical-align: middle; */
/* 转换为表格项 */
}
.box1{
width: 200px;
height: 200px;
background-color: #00BFFF;
/* 方法1 */
/* margin: 100px 100px; */
/* 给子元素加margin父元素overflow:hidden */
/* 方法4 */
/* position: absolute;
left: 100px;
top: 100px; */
/* 设置相对定位 子元素相对于父元素定位 */
/* 方法5 */
/* position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px; */
/* 设置相对定位
子元素相对于父元素高得一半定位
子元素相对于父元素宽得一半定位
最后子元素向左上偏移-100px(-100px表示)
*/
/* 方法6 */
/* display: inline-block; */
/* 方法7 */
transform: translate(100px,100px);
}
</style>
</head>
<body>
<!--
子元素在父元素内
子元素水平垂直居中
-->
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>
扫一扫
571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
