<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现内部元素居中的三种方式</title>
<style>
*{margin: 0; padding: 0;}
h2{text-align: center; color: red;}
h3{text-align: center; color: blue;}
.clearfix:after{content: '';clear: both; display: block; overflow: hidden; height: 0;}
/*方法一：传统方法通过固定宽度width: 1000px;和margin: 0 auto;来实现居中，
*弊端：1.需要精确计算出box的宽度，
* 2.当内部子元素需要增加或者减少的时候，这个宽度需要重新计算，比较麻烦。
* 3.需要使用clear来清除浮动，解决因浮动产生的外部元素无法获取高度的尴尬问题。
*/
.box-wrap0{position: relative; width: 100%; height: 100px; text-align: center; padding: 20px; line-height: 30px;}
.box-wrap0 .box{position: relative; width: 1000px; margin: 0 auto; border: red 1px solid;}
.box-wrap0 .box-item{width: 200px; float: left; background: #dedede;}
/*
*方法二：1.最里面的元素使用内联元素布局，2.外部元素使用margin: 0 auto; 可以轻松实现居中对齐
*/
.box-wrap1{position: relative; width: 100%; height: 100px; padding: 20px; text-align: center; line-height: 30px;}
.box-wrap1 .box{position: relative; margin: 0 auto; border: red 1px solid;}
.box-wrap1 .box-item{width: 200px; display: inline-block; background: #dedede;} /*内部元素为内联元素*/
/*
*方法三：1.最外部元素使用text-align: center; 2.给需要居中的元素display: inline-block;变成内联元素 3.给需要居中的元素float: left;，可以轻松实现居中对齐
*优势：当内部元素需要增加或者减少时，仍然会自动居中
*/
.box-wrap2{position: relative; width: 100%; text-align: center; margin-top: 50px; padding: 20px; line-height: 30px;} /* 内容居中显示：text-align: center;*/
.box-wrap2 .box{position: relative; display: inline-block; border: blue 1px solid;} /*需要居中的元素为内联元素*/
.box-wrap2 .box-item{width: 200px; float: left; margin: 0 10px; background: #dedede;}
</style>
</head>
<body>
<h2>实现内部元素居中的三种方式</h2>
<div class="box-wrap0">
<h3>方法一：固定宽度</h3>
<div class="box clearfix">
<div class="box-item">按钮1</div>
<div class="box-item">按钮2</div>
<div class="box-item">按钮3</div>
<div class="box-item">按钮4</div>
<div class="box-item">按钮4</div>
</div>
</div>
<div class="box-wrap1">
<div class="box">
<h3>方法二：子元素为内联元素</h3>
<div class="box-item">按钮1</div>
<div class="box-item">按钮2</div>
<div class="box-item">按钮3</div>
<div class="box-item">按钮4</div>
<div class="box-item">按钮4</div>
</div>
</div>
<div class="box-wrap2">
<div class="box">
<h3>方法三：需要居中的元素display: inline-block;变成内联元素</h3>
<div class="box-item">点击1</div>
<div class="box-item">点击2</div>
<div class="box-item">点击3</div>
<div class="box-item">点击4</div>
<div class="box-item">点击4</div>
</div>
</div>
</body>
</html>
