How do I use CSS to center the Div, and what CSS styles are there to center the div horizontally?
The main CSS code needed is two, one is text-align:center (content Center), the other is margin:0 auto, and its two styles need to be used in order to achieve the center display layout of Div box.
First we set the body Text-align:center, and then the need to center the Div box set CSS style margin:0 auto, so that the corresponding Div horizontal center.
The example explains the DIV Center code application, in order to observe the DIV center effect, we set a div to the div named ". Div" in the HTML div tag using class= "DIV", set its width to 400px, height is 100px, the border is red. So that we can observe the effect.
- <! DOCTYPE HTML>
- <html>
- <head>
- <Meta charset="utf-8" />
- <title></title>
- <style>
- body{Text-align:center}
- . div{margin:0 Auto; width:400px; height:100px; border:1px Solid #F00}
- /* CSS Comment: Set the width border height style for the effect of viewing */
- </style>
- </head>
- <body>
- <div class="div">
- DIVCSS5 instances
- </div>
- </body>
- </html>
Div Center Code Div Horizontal Center Display CSS Code