• 当前位置: 首页 / 建站百科 / 网站建设
  • CSS代码实现绝对居中方法

    时间:2022-11-17 浏览量: 收藏

    css代码居中的方法:

    1、定位法【position:absolute】;

    如果子级div有定义宽和高的话就可以用这个方法。注意:margin-top,和margin-left的值均为高和宽值的一半。

    <style>
       	div{
       		position: absolute;/* 或者使用fixed */
       		top: 50%;
       		left: 50%;
       		margin-top: -100px;
       		margin-left: -150px; 
       		width: 300px;
       		height: 200px;
       		background-color: #f00;
       	}
       </style> 
    <body>
       <div> </div>
    </body>

    2、使用【margin:auto】法;

    这个也可以是定位法。用这个方法要求子级div必须设置宽的值,不然没有效果哦~margin:auto是水平垂直都居中,如果仅仅设置水平居中,可设置为margin:auto 0;同理,如果仅仅设置垂直居中,可设置为margin:0 auto。

    <style>
       	div{
       		position: absolute;/* 或者使用fixed */
       		top: 0;
       		left: 0;
       		bottom: 0;
       		right: 0;
       		margin: auto; 
       		width: 300px;
       		height: 200px;
       		background-color: #f00;
       	}
       </style> 
    <body>
       <div> </div>
    </body>

    3、使用【display:table-cell】法;

    这个方法主要针对多行文字内容的垂直居中对齐。注意:text-align:center设置了文字的水平居中对齐,vertical-align:middle设置的是垂直居中对齐。

    <style>
    	div{
    		display: table-cell;
    		vertical-align: middle;
    		text-align: center;
    		width: 300px;
    		height: 200px;
    		background-color: #f00;
    		margin: auto;
    	}
       	
       	p{
       		display: inline-block;
       		vertical-align: middle;
       		width: 150px;
       		height: 100px;
       		border: 1px solid #ccc;
       		color: #fff;
       	}
       </style> 
    <body>
       <div>
    		<p>多行文字内容,居中设置效果</p>
       </div>
    </body>

    4、使用【transform:translate(x,y)】法。

    这个是css3中的新属性,如果子级元素没有设置宽和高值的话可以用这个方法来实现。这在我们做自适应页面的时候可以用到。

    <style>
    	div{
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    		-webkit-transform: translate(-50%, -50%);
    		-moz-transform: translate(-50%, -50%);
    		-ms-transform: translate(-50%, -50%);
    	}
       </style> 
    <body>
       <div>transform:translate(x,y)方法,绝对居中效果</div>
    </body>


    顶一下
    (0)
    0.00%
    踩一下
    0
    0.00%

    加载中~

    Copyright © 2012-2024 世敏网络 版权所有   闽ICP备18026760号-1    闽公网安备 35020502000640号   网站地图    Sitemap   关键词聚合

    世敏网络

    您已成功复制微信号,去微信立即添加好友!

    打开微信

    Wechart

    点击下方复制按钮,复制微信号!

    jzm866081

    https://www.xmsmwl.cn
    厦门世敏网络科技有限公司

    点击这里给我发消息
    嘿!有什么能帮到您的吗?