让div水平居中的css方法

旧城等待， 2022-06-02 03:51 225阅读 0赞

**一：让div水平居中的css方法:（默认情况下div的display为block，以下是针对display:block来说的）**

1、给要设置水平居中的div设置display:block  ,margin:0 auto，width   ,  height4个属性，可以让块级元素水平居中(默认情况下，div的position:static)

<!DOCTYPE html>
    <html>
    <head>
    	<title>test</title>
    	<meta charset="utf-8" />
    	<style>
    		div{
    		    width:200px;
    		    height:200px;
    		    background-color:red;
    		    display: block;
    		    margin:0 auto;
    		}
    	</style>
    </head>
    <body>
     <div></div>
    </body>
    </html>

显示的效果:

![Center][]

2、给要水平居中的div设置属性：width    height      position       left      margin-left

其中left:50%            position:的值除了static之外的都可以           marin-left:的值为负数，数值大小为width的一半

<!DOCTYPE html>
    <html>
    <head>
    	<title>test</title>
    	<meta charset="utf-8" />
    	<style>
    		div{
    			position:relative;
    			left:50%;
    			width:400px;
    			height:400px;
    			margin-left:-200px;
    		        background-color:red;
    		        display: block;
    		    
    		}
    	</style>
    </head>
    <body>
     <div></div>
    </body>
    </html>

![Center][]

二、**让div竖直居中的css方法:（默认情况下div的display为block，以下是针对display:block来说的）**

1、给要竖直居中的div设置属性：width    height      position       top     margin-top

top:50%          margin-top:为负值，值大小为height的一半                 position为absolute或者fixed

<!DOCTYPE html>
    <html>
    <head>
    	<title>test</title>
    	<meta charset="utf-8" />
    	<style>
    		div{
    			    position: absolute;
    			    top: 50%;
    			    width: 400px;
    			    height: 500px;
    			    margin-top: -250px;
    			    background-color: red;
    			    display: block; 
    		}
    	</style>
    </head>
    <body>
     <div></div>
    </body>
    </html>

![Center 1][]

三、让div同时水平竖直居中的方法

1、同时水平竖直居中的div设置属性：width    height      position       top     margin-top     left      margin-left

top:50%   left:50%     position:absolute/fixed           margin-top:-height/2                 margin-left:-width/2

<!DOCTYPE html>
    <html>
    <head>
    	<title>test</title>
    	<meta charset="utf-8" />
    	<style>
    		div{
    			    position: absolute;
    			    top: 50%;
    			    left: 50%;
    			    width: 400px;
    			    height: 500px;
    			    margin-top: -250px;
    			    margin-left: -200px;
    			    background-color: red;
    			    display: block; 
    		}
    	</style>
    </head>
    <body>
     <div></div>
    </body>
    </html>

![Center 2][]

2、给要水平居中的div设置属性：width    height      position       left      margin-left

[Center]: /images/20220602/b32e1308e95d43a895ddcad13bc1e1e8.png
[Center 1]: /images/20220602/d14d81bd31ac447bac2e4d3a7884b8f8.png
[Center 2]: /images/20220602/37aac9e1c49f49dba3266ec7372205ba.png