Today, using CSS to meet a very difficult problem, the div itself does not define its own center of the property, many online methods are introduced with the superior text-align:center and then nested a layer of div to solve the problem. Text-align:center; This property is not the center of the Div, is to let the content in the div is centered, when we want to let a container of div horizontal Center In fact the method is simple simply define the margin, that is margin:0 auto; then your div is centered horizontally. The following code example: Box2 horizontally centered in Box1: <! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>div Center Problem </title>
<style type= "Text/css" >
. box1{
width:1000px;
height:700px;
Background-color:blue;
}
. box2{
width:666px;
height:500px;
Background-color: #ccc;
margin:0 Auto;
}
</style>
<body>
<div class= "Box1" >
<div class= "Box2" ></div>
</div>
</body>
How to center the div horizontally in CSS
