css居中方式

最新推荐文章于 2024-10-01 23:20:42 发布

hh湫丶

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量161

点赞数 1

文章标签： css 定位

本文链接：https://blog.csdn.net/lovezhuer1/article/details/104878740

版权

水平居中

块级元素水平居中 margin:0 auto;

<style>
   .box{
       width:200px;
       height: 200px;
       background: #ff0000;
       margin:0 auto;
   }
</style>
<div class="box"></div>

文字水平居中 text-align: center;

 <style>
 	.box{
	    width:200px;
	    height: 200px;
	    background: #ff0000;
	    text-align: center;
	}
</style>
<div class="box">Hello World</div>

将子元素更改为inline-block元素后水平居中，父元素设置：text-align: center;

<style>
     .wrap{
         width: 500px;
         height: 500px;
         background:cadetblue;
         text-align: center;
     }
     .box{
         width:200px;
         height: 200px;
         background: #ff0000;
         display:inline-block;
     }
 </style>
 <div class="wrap">
     <div class="box"></div>
 </div>

flex布局水平居中 justify-content: center;

<style>
    .wrap{
        width: 500px;
        height: 500px;
        background:cadetblue;
        display: flex;
        justify-content: center;
    }
    .box{
        width:200px;
        height: 200px;
        background: #ff0000;
    }
</style>
<div class="wrap">
    <div class="box"></div>
</div>

定位position

<style>
   .wrap{
       width: 500px;
       height: 500px;
       background:cadetblue;
       position: relative;
   }
   .box{
       position: absolute;
        /*法一：*/
        /*
       left: 0;
       right: 0;
       margin: auto;
       */
       /*法二：*/
       left:50%;
       top:0;
       margin-left:-100px;
       /*法三：*/
       /* left: calc(50% - 100px);*/
           
       width:200px;
       height: 200px;
       background: #ff0000;
   }
</style>
<div class="wrap">
   <div class="box"></div>
</div>

垂直居中

文字垂直居中 line-height

<style>
    .box{
        width:200px;
        height: 200px;
        background: #ff0000;
        line-height: 200px;
    }
</style>
 <div class="box">Hello World</div>

flex布局进行垂直居中 align-items: center;

style>
    .wrap{
        width: 500px;
        height: 500px;
        background:cadetblue;
        display: flex;
        align-items: center;
    }
    .box{
        width:200px;
        height: 200px;
        background: #ff0000;
    }
</style>
<div class="wrap">
	 <div class="box"></div>
</div>

定位position

<style>
  .wrap{
        width: 500px;
        height: 500px;
        background:cadetblue;
        position: relative;
    }
    .box{
        position: absolute;
        /*法一：*/
        /*
        top: 0;
        bottom: 0;
        margin: auto;
        */
        /*法二：*/
        /*
        left:0;
        top:50%;
        margin-top:-100px;
        */
        /*法三：*/
        top: calc(50% - 100px);
     
        width:200px;
        height: 200px;
        background: #ff0000;
    }
</style>
<div class="wrap">
    <div class="box"></div>
</div>

水平垂直居中

文字水平垂直居中

<style>
    .box{
        width:200px;
        height: 200px;
        background: #ff0000;
        text-align: center;
        line-height: 200px;
    }
</style>
<div class="box">Hello World</div>

定位position

注：以下三种方法均要求居中元素的宽高必须固定。

<style>
	.wrap{
	    width: 500px;
	    height: 500px;
	    background:cadetblue;
	    position: relative;
	}
	.box{
	    position: absolute;
	    /*法一：*/
	    /*
	    left:0;
	    right: 0;
	    top:0;
	    bottom:0;
	    margin:auto;
	    */
	    /*法二：*/
	    /*
	    left:50%;
	    top:50%;
	    margin-left:-100px;
	    margin-top:-100px;
	     */
	     /*法三：*/
        top: calc(50% - 100px);
        left: calc(50% - 100px);
        
	    width:200px;
	    height: 200px;
	    background: #ff0000;
	}
</style>
<div class="wrap">
	<div class="box"></div>
</div>

以下方法不要求居中元素固定宽高。

flex布局 align-items: center; justify-content: center;

<style>
	.wrap{
	    width: 500px;
	    height: 500px;
	    background:cadetblue;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	.box{
	    background: #ff0000;
	}
</style>
 <div class="wrap">
    <div class="box">Hello World</div>
</div>

position+transform

<style>
   .wrap{
       width: 500px;
       height: 500px;
       background:cadetblue;
       position: relative;
   }
   .box{
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       background: #ff0000;
   }
</style>
div class="wrap">
	<div class="box">Hello World</div>
</div>