<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--行内元素水平居中需要借助于父元素，父元素宽度确定情况-->
<!--text-align只适用于子元素是行内元素需要行内元素水平居中的情况-->
<!-- <div id="div1" style="text-align: center;background-color: gray;width: 300px;height: 300px">
<span>AAA</span>
</div> -->
<!--行内元素水平居中，父元素宽度不确定-->
<!-- <div id="div1" style="text-align: center;background-color: gray;"> -->
<!-- 嵌套一层 -->
<!-- <div style="width: 100%"> -->
<!-- <span>AAA</span> -->
<!-- </div> -->
<!-- </div> -->
<!--行元素水平居中，不需要借助其他元素，原理是...-->
<!-- <div id="div1" style="background-color: gray;width: 300px;height:300px;margin: 0 auto">
<div style="background-color: red;width: 100px;height: 100px;margin: 0 auto"></div>
</div> -->
<!--行内元素垂直居中-->
<!-- <div id="div1" style="background-color: gray;width: 300px;height: 300px">
<span style="line-height: 300px">AAA</span>
</div> -->
<!--行元素垂直居中（待完成）可以使用transform的方式，但是兼容性不好-->
<!-- <div id="div1" style="background-color: gray;width: 300px;height: 300px;position: relative;">
<div style="background-color: red;width: 100px;height: 100px;position: absolute;top: 50%;bottom: 50%"></div>
</div> -->
<div id="div1" style="background-color: gray;width: 300px;height: 300px;">
<div style="background-color: red;width: 100px;height: 100px;display: inline-block;line-height: 300px"></div>
</div>
<!--行内元素水平垂直居中-->
<!-- <div id="div1" style="background-color: gray;width: 300px;height: 300px;position: relative;text-align: center;">
<span style="line-height: 300px">AAA</span>
</div> -->
<!--行元素水平垂直居中-->
<!--margin auto的原理适用于垂直情况，只要父元素高度确定-->
<!-- <div id="div1" style="background-color: gray;width: 300px;height: 300px;position: relative;">
<div style="background-color: red;width: 100px;height: 100px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;"></div>
</div> -->
</body>
</html>
网友评论