가로 및 세로 중앙에 있는 요소에 대한 CSS3 구현 예제 코드

高洛峰

풀어 주다： 2017-03-27 10:14:47

원래의

1486명이 탐색했습니다.

이 글은 주로 요소의 가로 및 세로 중심 배치에 대한 CSS3 구현 예제 코드를 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

코드는 다음과 같습니다

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伸缩布局</title>
<style type="text/css">
*{
  margin: 0;
  padding:0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
div{
    height: 100px;
    width: 100px;
    overflow: hidden;
     display:flex;
     border: 1px dotted red;
  align-items: center;
  justify-content:center;
}
img{
    width: 50px;
    height: 50px;
}
</style>
</head>
<body>
    <div>
<img src="http://img.mukewang.com/5365d7b10001e8d506350529.jpg" alt="" /></div>
</body>
</html>

로그인 후 복사

그러면 사진이 중앙에 오겠죠

위 내용은 가로 및 세로 중앙에 있는 요소에 대한 CSS3 구현 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：

css3

원천：php.cn

이전 기사：CSS3의 유연한 상자 모델에 대한 자세한 설명 다음 기사：CSS 상자 효과에 대한 자세한 설명

본 웹사이트의 성명

저자별 최신 기사