집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 너비 및 높이 적응형 div 요소 및 수직 중앙에 배치하는 방법

CSS 너비 및 높이 적응형 div 요소 및 수직 중앙에 배치하는 방법

黄舟원래의: 2017-09-16 11:46:191700검색

CSS 스타일을 작성할 때 너비와 높이를 알 수 없는 요소가 수직 중앙에 배치되는 문제가 자주 발생합니다. 이를 달성하는 방법은 다음과 같습니다. 제가 일반적으로 사용하는 두 가지 방법은

위의 코드입니다. 다음은 구조 코드입니다

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

　다음은 스타일 코드입니다

.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;
}

　두 번째 CSS3 변환 솔루션

.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>

위 내용은 CSS 너비 및 높이 적응형 div 요소 및 수직 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：웹팩 처리 CSS 예시 상세 소개다음 기사：웹팩 처리 CSS 예시 상세 소개