精华内容
下载资源
问答
  • 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法 放上示范的html代码:<body> &...

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
    水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法

    下面说两种在屏幕正中(水平居中+垂直居中)的方法
    放上示范的html代码:

    <body>
    	<div class="main">
    		<h1>MAIN</h1>
    	</div>
    </body>
    
    • 方法一:

    div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。

    .main{
    	text-align: center; /*让div内部文字居中*/
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    }
    

    效果如图:
    这里写图片描述

    • 方法二:
      仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
     .main{
    	text-align: center;
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    }
    
    • 方法三:
      对于水平居中,可以使用最简单的<center>标签,不过已经过时了,用法如下:
    <p><center>123</center></p>
    

    这个<center>标签就是相对于<p>标签里的文字,可以使其居中。

    由于center标签已经过时了,所以正规一点的话还是不建议使用的,可以使用如下的方式代替:

    <p style="text-align:center;">123</p>
    


    欢迎大家加入QQ群一起交流讨论,「吟游」程序人生——YinyouPoet
    展开全文
  • 水平居中 方法一:在父容器上定义固定宽度,margin值设成auto &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;...

    水平居中

    1. 方法一:在父容器上定义固定宽度,margin值设成auto
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>helloworld</title>
    	</head>
    	<style type="text/css">
    		.div1{
    			background-color: blue;
    			width: 200px;
    			margin: auto;
    		}
    		.div2{
    			background-color: orangered;
    		}
    	</style>
    	<body>
    		<div class="div1">
    			<div class="div2">
    				你好啊!!!!!!!!!
    			</div>
    		</div>
    	</body>
    	
    </html>
    
    

    这里写图片描述

    方法2:在子元素中将display设置为inline-block,父元素text-algin设置为center

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>helloworld</title>
    	</head>
    	<style type="text/css">
    		.div1{
    			background-color: blue;
    			text-align: center;
    		}
    		.div2{
    			display: inline-block;
    			background-color: orangered;
    		}
    	</style>
    	<body>
    		<div class="div1">
    			<div class="div2">
    				你好啊!!!!!!!!!
    			</div>
    		</div>
    	</body>
    	
    </html>
    
    

    这里写图片描述

    垂直居中

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>helloworld</title>
    	</head>
    	<style type="text/css">
    		.div1{
    			width: 200px;
    			height: 200px;
    			display: table-cell;
        		vertical-align: middle;
        		text-align: center;     
    		}
    		.div2{
    			/*display: inline-block;*/
    			background-color: orangered;
    		}
    	</style>
    	<body>
    		<div class="div1">
    			<div class="div2">
    				你好啊!!!!!!!!!
    			</div>
    		</div>
    	</body>
    	
    </html>
    
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>helloworld</title>
    	</head>
    	<style type="text/css">
    		.div1{
    			width: 200px;
    			height: 200px;
    			display: flex;
        		justify-content:center;
        		align-items:Center;
    		}
    		.div2{
    			/*display: inline-block;*/
    			background-color: orangered;
    		}
    	</style>
    	<body>
    		<div class="div1">
    			<div class="div2">
    				你好啊!!!!!!!!!
    			</div>
    		</div>
    	</body>
    	
    </html>
    
    

    垂直水平居中

    方式1:绝对定位

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>居中</title>
    		<style>
    			*{
    				padding: 0;
    				margin: 0;
    			}
    			.box{
    				width: 500px;
    				height: 400px;
    				background: red;
    				margin: 100px;
    				//border: 2px;
    			}
    			.child{
    				position: absolute;
    				width: 200px;
    				height: 150px;
    				background: blue;
    				margin: 125px 150px;
    			}
    		</style>
    	</head>
    	<body>
     
    				<div class="box">
    				    <div class="child"></div>
    				</div>
    		
    	</body>
    </html>
    
    

    这里写图片描述

    方式二 定位+负margin

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>居中</title>
    		<style>
    			.child{
    				position: fixed;
    				width: 200px;
    				height: 150px;
    				background: blue;
    				top:50%;
    				left: 50%;
    				margin-top: -75px;
    				margin-left:-100px ;
    				
    			}
    		</style>
    	</head>
    	<body>
    		 <div class="child"></div>
    	</body>
    </html>
    
    

    这里写图片描述

    方式3:使用translate实现平移

      下面的transform代码可以更换为transform: translate(-50%,-50%);
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>居中</title>
    		<style>
    			.child{
    				position: fixed;
    				width: 200px;
    				height: 150px;
    				background: blue;
    				top:50%;
    				left: 50%;
    				transform: translate(-100px,-75px);
    			}
    		</style>
    	</head>
    	<body>
    		 <div class="child"></div>
    	</body>
    </html>
    
    

    效果如上图。

    方式4:通过设置bottom top left right margin来实现

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>居中</title>
    		<style>
    			.father{
    				width: 500px;
    				height: 500px;
    				background: black;
    				position: relative;
    			}
    			.child{
    				position: absolute;
    				width: 200px;
    				height: 150px;
    				background: blue;
    				top:0;
    				left:0;
    				right: 0;
    				bottom: 0;
    				margin: auto;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="father">
    			<div class="child"></div>
    		</div>
    		 
    	</body>
    </html>
    
    

    这里写图片描述

    方式5:flex布局

    最长使用,设置 display: flex;justify-content: center;align-items: center;三个属性;
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>居中</title>
    		<style>
    	.father {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 500px;
            height: 500px;
            background-color: rgb(197, 34, 34);    
        }
        .child {
            width: 50px;
            height: 70px;
            background-color: rgb(36, 167, 64);
        } 
    	</style>
    	</head>
    	<body>
    		<div class="father">
    			<div class="child"></div>
    		</div>
    		 
    	</body>
    </html>
    

    方式6:使用tablecell

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>居中</title>
    	<style>
    	  .father {
    
            display: table-cell;
        	vertical-align: middle;
        	text-align: center;    
            width: 500px;
            height: 500px;
            background-color: rgb(197, 34, 34);
            
        }
    
        .child {
            display: inline-block;
            width: 50px;
            height: 70px;
            background-color: rgb(36, 167, 64);
        } 
    	</style>
    	</head>
    	<body>
    		<div class="father">
    			<div class="child"></div>
    		</div>
    		 
    	</body>
    </html>
    

    方式7:JS方式

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        
        .father {  
            width: 500px;
            height: 500px;
            background-color: rgb(197, 34, 34);
        }
        .child {
            width: 50px;
            height: 70px;
            background-color: rgb(28, 150, 123);
        }
    </style>
    
    <body>
        <div class="father">
            <div class="child">
            </div>
        </div>
    </body>
        <script>
            let father=document.getElementsByClassName('father')[0];
            let child=document.getElementsByClassName('child')[0];
            fatherH=father.clientHeight;
            fatherW=father.clientWidth;
            childW=child.offsetWidth;
            childH=child.offsetHeight;
            child.style.position="absolute";
            child.style.top=(fatherH-childH)/2+'px';
            child.style.left=(fatherW-childW)/2+'px';
    
    
        </script>
    </html>
    
    展开全文
  • 水平居中

    2017-07-24 16:01:52
    水平居中方式 (1)内联元素 在父元素中设置text-align属性为center<!Doctype html> 水平居中方式-内联元素 div { width: 480px; height:

    水平居中方式
    (1)内联元素
    在父元素中设置text-align属性为center

    <!Doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>水平居中方式-内联元素</title>
        <style>
        div {
            width: 480px;
            height: 100px;
            text-align: center;
            border: 1px solid #333;
        }
        h3 {
            border: 1px solid #333;
        }
        span {
            border: 1px solid #333;
        }
        </style>
    </head>
    <body>
        <div>
            <h3>内联元素居中</h3>
            <span>内联元素</span>
        </div>
    </body>
    <html>

    效果如下图:

    这里写图片描述

    从结果中看到块级元素和内联元素居中了,块级元素为什么会居中呢?其实,text-align属性只是使块级元素文本居中,而未达到元素居中。在上述代码中,因为未对h3设置宽度,所以它的宽度为父元素的宽度,但如果对其设置宽度,情况又将不同,设置h3的宽度为100px,效果如下图

    这里写图片描述

    (2)定宽块状元素
    设置margin属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平居中方式-定宽块状元素</title>
        <style>
        div {
            width: 480px;
            height: 100px;
            text-align: center;
            border: 1px solid #333;
        }
        h3 {
            width: 100px;
            margin: 0 auto;
            border: 1px solid #333;
        }
        span {
            border: 1px solid #333;
        }
        </style>
    </head>
    <body>
        <div>
            <h3>块级元素</h3>
            <span>内联元素</span>
        </div>
    </body>
    </html>

    效果如下图所示

    这里写图片描述

    由于h3设置了width属性,通过设置margin属性,使得h3在div中水平居中。

    (3)不定宽块状元素
    不定宽块状元素居中有三种方式,下面就来一一介绍

    1)将元素的display属性设置为inline,通过给父元素设置text-align: center来实现居中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平居中方式-不定宽块状元素</title>
        <style>
        div {
            width: 480px;
            height: 100px;
            text-align: center;
            border: 1px solid #333;
        }
        h3 {
            display: inline;
            border: 1px solid #333;
        }
        span {
            border: 1px solid #333;
        }
        </style>
    </head>
    <body>
        <div>
            <h3>块级元素</h3>
            <span>内联元素</span>
        </div>
    </body>
    </html>

    效果如下图所示

    这里写图片描述

    缺点:块状元素变成内联元素,不能设置块状元素特有的属性

    2)加入table标签,通过给table设置margin属性来实现水平居中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平居中方式-不定宽块状元素</title>
        <style>
    
        div {
            width: 480px;
            height: 100px;
            text-align: center;
            border: 1px solid #333;
        }
        table {
            margin: 0 auto;
        }
        h3 {
            border: 1px solid #333;
        }
        span {
            border: 1px solid #333;
        }
        </style>
    </head>
    <body>
    <div>
        <table>
            <tbody>
                <tr>
                    <td>
                        <h3>块级元素</h3>
                        <span>内联元素</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </body>
    </html>

    效果如下图所示

    这里写图片描述

    缺点:增加了无语意标签,加深了标签的嵌套层数

    3)设置position属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>水平居中方式-不定宽块状元素</title>
        <style>
        div {
            float: left;
            position: relative;
            left: 50%;
        }
        h3 {
            float: left;
            position: relative;
            left: -50%;
        }
        </style>
    </head>
    <body>
        <div>
            <h3>块状元素</h3>
        </div>
    </body>
    </html>

    效果如下图所示

    这里写图片描述

    如果全部都加边框,效果会怎样?

    这里写图片描述

    设置postion属性可以保留块级元素仍以display:block的形式显示,而且不添加无语义标签,不增加嵌套深度,但缺点是设置position:relative,带来一定的副作用

    (完)

    展开全文
  • CSS水平居中+垂直居中+水平/垂直居中的方法总结

    万次阅读 多人点赞 2018-09-02 19:28:12
    水平居中  行内元素  块级元素 方案一:(分宽度定不定两种情况) 方案二:使用定位属性 方案三:使用flexbox布局实现(宽度定不定都可以) 垂直居中 单行的行内元素 多行的行内元素  块级元素 水平垂直...

     

    目录

    水平居中 

    行内元素

     块级元素

    方案一:(分宽度定不定两种情况)

    方案二:使用定位属性

    方案三:使用flexbox布局实现(宽度定不定都可以)

    垂直居中

    单行的行内元素

    多行的行内元素

     块级元素

    水平垂直居中

    已知高度和宽度的元素

    未知高度和宽度的元素

    方案一:使用定位属性

    方案二:使用flex布局实现


    水平居中 

    • 行内元素

    首先看它的父元素是不是块级元素,如果是,则直接给父元素设置 text-align: center; 

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            text-align: center;
           }
    </style>
    
    <div id="father">
        <span id="son">我是行内元素</span>
    </div>

    如果不是,则先将其父元素设置为块级元素,再给父元素设置 text-align: center;

    <style>
        #father {
            display: block;
            width: 500px;
            height: 300px;
            background-color: skyblue;
            text-align: center;
           }
    </style>
    
    <span id="father">
        <span id="son">我是行内元素</span>
    </span>

    效果:


    •  块级元素

    方案一:(分宽度定不定两种情况)

    定宽度:需要谁居中,给其设置 margin: 0 auto; (作用:使盒子自己居中)

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0 auto;
        }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:

     不定宽度:默认子元素的宽度和父元素一样,这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素,给父元素设置 text-align: center; 

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            text-align: center;
        }
    
        #son {
            background-color: green;
            display: inline;
        }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:(将#son转换成行内元素,内容的高度撑起了#son的高度,设置高度无用)


    方案二:使用定位属性

    首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的left:50%,即让子元素的左上角水平居中;

    定宽度:设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            margin-left: -50px;
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    不定宽度:利用css3新增属性transform: translateX(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            height: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:


    方案三:使用flexbox布局实现(宽度定不定都可以)

    使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            justify-content: center;
        }
    
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果: 


    垂直居中

    • 单行的行内元素

    只需要设置单行行内元素的"行高等于盒子的高"即可;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    
        #son {
            background-color: green;
            height: 300px;
        }
    </style>
    
    <div id="father">
        <span id="son">我是单行的行内元素</span>
    </div>

    效果:

     


    • 多行的行内元素

    使用给父元素设置display:table-cell;vertical-align: middle;属即可;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: table-cell;
            vertical-align:middle;
        }
    
        #son {
            background-color: green;
        }
    </style>
    
    <div id="father">
        <span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
    </div>

    效果:


    •  块级元素

    方案一:使用定位

    首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的top: 50%,即让子元素的左上角垂直居中;

    定高度:设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            height: 100px;
            background-color: green;
            position: absolute;
            top: 50%;
            margin-top: -50px;
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    不定高度:利用css3新增属性transform: translateY(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            width: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            transform: translateY(-50%);
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:


    方案二:使用flexbox布局实现(高度定不定都可以)

    使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            align-items: center;
        }
    
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果: 


    水平垂直居中

    • 已知高度和宽度的元素

    方案一:设置父元素为相对定位,给子元素设置绝对定位,top: 0; right: 0; bottom: 0; left: 0; margin: auto;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:


    方案二:设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:


    • 未知高度和宽度的元素

    方案一:使用定位属性

    设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:


    方案二:使用flex布局实现

    设置父元素为flex定位,justify-content: center; align-items: center;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
    }
    
        #son {
            background-color: green;
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:

    展开全文
  • 【让div在屏幕中居中(水平居中+垂直居中)的几种方法】 水平居中方法: 1.inline,inline-block元素的水平居中,在父级块级元素中设置text-align:center; 2.确定宽度的块级元素水平居中方法 margin:0 auto...
  • 文章目录一、垂直居中二、水平居中三、水平垂直居中 参考 一、垂直居中 二、水平居中 三、水平垂直居中
  • 一、水平居中  1、行内元素水平居中 text-align :center  2、块级元素水平居中 margin:0 auto   3、多个块状元素的水平居中  实现多个水平排列的块状元素的水平居中,是将要水平排列的块状元素设为display...
  • 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: 水平居中 1.行内元素水平居中 利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、...
  • 文章目录水平居中块元素水平居中行内元素水平居中垂直居中块元素垂直居中行内元素垂直居中img垂直居中input(radio、checkbox)垂直居中多行文本垂直居中水平垂直居中固定宽高不定宽高 水平居中 块元素水平居中 行内...
  • 1、水平居中 水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中 这里行内元素是指文本text、图像img、按钮超链接等,只需给父元素设置text-align:center即可实现。 .center{ text-...
  • 1.level0–行内元素水平居中body{ text-align:center; }思路:body或父容器设置text-align:center;即可。2.level1–水平居中以下都是对块状元素而言。 .basic{ width:200px; height:200px; background-color:...
  • 行盒(行块盒)水平居中 直接设置行盒(行块盒)父元素 text-align:center; 常规流块盒水平居中 定宽, 设置左右margin为auto; 浮动块盒水平居中 一般会通过设置magin手动居中 绝对定位元素的水平居中 定宽,...
  • 元素水平居中

    千次阅读 2019-09-20 15:59:36
    元素水平居中 table { margin: auto /*元素水平居中*/ }
  • 文章目录前言一、水平居中1.行内元素水平居中2.块级元素水平居中定宽块级元素水平居中不定宽块级元素水平居中二、垂直居中1.单行文本垂直居中2.多行文本垂直居中3.块级元素垂直居中 前言 一、水平居中 首先我们要...
  • 1.水平居中 (1)如果父元素是块级元素,子元素是行内元素,要求子元素水平居中,可以在父元素上定义text-align:center来实现水平居中 (2)如果父元素和子元素都是块级元素,那么可以在子元素上设置margin:0 auto...
  • 水平居中 垂直居中 水平垂直居中 水平居中 水平居中需要考虑3点: 行内或是行内元素居中? 块级元素居中? 多个块级元素居中? 1、行内或是行内元素居中: 这可以适用于inline, inline-block, inline-table...
  • 1.0文本居中 1.1文本水平居中 //html <body> <div> <p>123</p> <p>456</p> </div> </body> //css <style> div{ width: 4...
  • 前言:在网页布局中,经常遇到需要使元素居中对齐的时候,居中对齐的方式有:水平居中、垂直居中和水平垂直居中。这次,借此回顾总结一下,并在此记录下相关内容。 一、水平居中:  (1)行内元素的水平居中  ...
  • 布局:5种水平居中 + 3种垂直居中 + 3种水平垂直居中
  • 1.元素水平居中 1.1行内元素水平居中 像文本text、图像img、按钮等行内元素要实现水平居中,只需要给父元素设置text-align:center;即可。 .center{ text-align:center; } <div class="center">文本水平...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,818
精华内容 7,927
关键字:

水平居中