垂直居中的方法和技巧
關于垂直居中的，不僅僅是line-height
慕瓜8892989
2016-09-20
1 回答
舉報
0/150
提交
取消
關于垂直居中的，不僅僅是line-height
2016-09-20
舉報
2016-09-20
簡單的情況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>