How to use CSS to center a DIV-CSS Tutorial-php.cn

How to use CSS to center a DIV

php中世界最好的语言

Release： 2017-11-20 11:07:52

Original

2950 people have browsed it

The code I brought to you today is what many friends need to use. CSS is used to achieve DIV centering. Friends in need can save this article. It will be convenient for you to use in the future when you need to use CSS to achieve DIV centering. Use There are many ways to center a DIV in CSS. This time I will teach you a relatively simple and highly compatible code. Come in and take a look.

There are two main css codes required, one is text-align:center (content is centered), the other is margin:0 auto; the other two Styles need to be used together to achieve centered display layout of the div box.

First we set text-align:center on the body, and then set the css style margin:0 auto on the div box that needs to be centered, so that the corresponding div can be horizontally centered.

Example explanationdiv centering code application, in order to observe the div centering effect, we set a div for the div named ".div" and use class="div" in the div tag in the html. Set its width to 400px; its height to 100px, and its border to red. So that we can observe the effect.

1. Complete html+css code

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div居中 在线演示 www.divcss5.com</title> 
<style> 
body{ text-align:center} 
.div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00} 
/* css注释：为了观察效果设置宽度 边框 高度等样式 */ 
</style> 
</head> 
<body> 
<div class="div"> 
DIVCSS5实例 
</div> 
</body> 
</html>

Copy after login

div centering code application features

This centering method makes the div centering effect perfectly compatible with all major platforms and compatible with all major platforms Browsers, regardless of high version IE or high version IE are compatible.

The above is how to use CSS to center the DIV. Have you learned it?

Related recommendations:

css water wave button special effect

CSS3 tips for drawing various basic graphics

How to draw triangles and parallelograms with CSS

The above is the detailed content of How to use CSS to center a DIV. For more information, please follow other related articles on the PHP Chinese website!