垂直居中的方法和技巧

源自：1-1 line-height的定义

垂直居中的方法和技巧

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

提问者：慕瓜8892989 2016-09-20 14:15

个回答

qq_快乐还是忧伤_03217928

2016-09-20 18:43:24

简单的情况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