Home > Article > Web Front-end > css width and height adaptive div element and how to vertically center it

css width and height adaptive div element and how to vertically center it

黄舟Original: 2017-09-16 11:46:191667browse

When we write css styles, we often encounter a problem, that is, an element with unknown width and height needs to be vertically centered. How to achieve this? The following are two methods I commonly use

upper code

The following is the structure code

<div class="wrap">//此处为父组件 我们会设置父级的宽高并让其居中
　　<div class="center">//子组件我们要实现它的垂直居中 不设置他的宽高 宽高 都由下面的img引入的图片撑开
　　<img width="100px" src="img/logo.a68568a.png"/>
　　</div>
　　</div>

The following is the style code

.wrap{设置一个居中的外框
　　　　　　　　width: 500px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
text-align: center;//水平居中
}
.wrap:before{//设置一个宽度为0的伪类为什么要设置这个伪类 起时这个伪类起到了一个对准线的作用
display: inline-block;
content: &#39;&#39;;
height: 100%;
width: 0;
vertical-align: middle;//垂直居中
}
.center{//这个时候 在对我们的centerdiv 设置 vertical-align: middle 就可垂直居中了
vertical-align: middle;
display: inline-block;
}
img{
vertical-align: top;
}

Second css3 transform solution

.wrap{//一个固定宽高 居中的外框
width: 500px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
}
　　　　.center{//我们的center div 还是写成inline-block 的样式
　　　　　　　　　position: relative;
　　　　　　　　　　//相对定位 通过相对定位left  top 值的设置来让center div 的左上角的位置 为wrap 的中心
　　　　　　　　　　//但这个时候我们还不是完全垂直居中 因为我们的center div 本身也有自适应的宽高 这个时候 就要用到transform了
　　　　　　　　　　//通过translateX(-50%) translateY(-50%) 让center 本身在x轴y轴上偏移50% 达到真正的居中（轴心点默认在左上角）
　　　　　　　　　　//注意transform各个浏览器有不同的前缀并且不兼容ie8 以下
 top: 50%;
 left: 50%;
 display: inline-block;
-webkit-transform: translateX(-50%) translateY(-50%);
}
img{
vertical-align: top;
}

<!DOCTYPE html><html><head><meta charset="utf-8" />
<title>
</title>
<style type="text/css">
document{height: 100%;}
html{height: 100%;}
body{height: 100%;
overflow: hidden;margin: 0;}
#bigwrap{width: 100%;height: 100%;text-align: center;}
#bigwrap:before{height: 100%;width: 0;
vertical-align: middle;content: &#39;&#39;;
display: inline-block;}
.wrap{width: 500px;height: 400px;border: 1px solid black;margin: 0 auto;text-align: center;}
.wrap:before{display: inline-block;content: &#39;&#39;;height: 100%;width: 0;vertical-align: middle;}
.center{vertical-align: middle;display: inline-block;}img{vertical-align: top;}
/*
.center {   
position: fixed;  
top: 50%;  
left: 50%;  
background-color: #000;  
width:50%;  
height: 50%;-webkit-transform: translateX(-50%) translateY(-50%);}
*/
</style>
</head>
<body>
<!--<div id="bigwrap">--><div class="wrap">
<div class="center">
<img width="100px" src="img/logo.a68568a.png"/>
</div>
</div>
</div>
</body>
</html>

The above is the detailed content of css width and height adaptive div element and how to vertically center it. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to examples of webpack processing CSSNext article：Detailed introduction to examples of webpack processing CSS

See more

css width and height adaptive div element and how to vertically center it

Related articles