为了账号安全,请及时绑定邮箱和手机立即绑定

垂直居中的方法和技巧

关于垂直居中的,不仅仅是line-height

正在回答

1 回答

简单的情况text-align:center;  vertical-align: middle等,下面是复杂一点的:

// 方法一:已知元素的高宽

     <div></div>

 CSS:

  .content{

        background-color:#6699FF;

        width:200px;

        height:200px;

        position: absolute;        

        top: 50%;

        left: 50%;

        /* 二分之一的负height,width  */

        margin-top:-100px ;

        margin-left: -100px;

    }

 //方法二:未知元素的高宽    

     <div></div>

 CSS:

  .content{

        background-color:#6699FF;

        width:200px;

        height:200px;

        position: absolute;        

        /* transform: translate(-50%,-50%)  或 margin:auto与四边距相等 */   

        margin:auto;      /*无这个就只有top、left起作用*/

        top: 0;

        left: 0;  

        bottom:0;  

        right: 0;

    }

//3,两个按钮在div中居中,并相距一定距离

<style type="text/css">

div{width: 600px;height: 500px;background-color: rgba(240,240,240,0.9);text-align:

        center;}

.button{ width:100px;height: 90px;background-color: #f00;position: relative;top: 50%;

           transform: translate(0,-50%)  }

.button1{margin-left: 0;margin-right: 100px;}

.button2{margin-right: 0;}

</style>

</head>

<body>

 <div>

  <input type="button" class="button button1"></input>

  <input type="button"  class="button button2"></input>

 </div>


0 回复 有任何疑惑可以回复我~
#1

慕少7532173

方法2所说的未知元素宽高的居中方法,.content中不是已经设置height和width了吗
2016-10-21 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

垂直居中的方法和技巧

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信