HTML 요소를 가운데에 맞추기 위해 CSS를 사용할 수 있습니다 left: 50%;. 그러나 이것은 전체 창을 기준으로 요소를 중앙에 배치합니다.
요소의 자식 인 <div>요소가 있으며 <div>전체 창이 아닌 이 부모와 관련하여 자식을 중앙에 배치하려고합니다 .
컨테이너 <div>가 모든 내용을 중심으로 하고 싶지는 않지만 하나의 특정 자식 을 원합니다 .
답변
설정 text-align:center;부모 DIV, 그리고 margin:auto;자식 DIV에.
#parent {
text-align:center;
background-color:blue;
height:400px;
width:600px;
}
.block {
height:100px;
width:200px;
text-align:left;
}
.center {
margin:auto;
background-color:green;
}
.left {
margin:auto auto auto 0;
background-color:red;
}
.right {
margin:auto 0 auto auto;
background-color:yellow;
}<div id="parent">
<div id="child1" class="block center">
a block to align center and with text aligned left
</div>
<div id="child2" class="block left">
a block to align left and with text aligned left
</div>
<div id="child3" class="block right">
a block to align right and with text aligned left
</div>
</div>이것은 대부분 무엇이든 중심을 잡는 좋은 자원입니다.
http://howtocenterincss.com/
답변
실제로 이것은 CSS3 flex 박스에서 매우 간단 합니다.
.flex-container{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
justify-content: center;
align-items: center;
width: 400px;
height: 200px;
background-color: #3498db;
}
.inner-element{
width: 100px;
height: 100px;
background-color: #f1c40f;
}<div class="flex-container">
<div class="inner-element"></div>
</div>최신 정보:
이 답변을 작성한 시점에서 OP 편집을 읽지 않은 것 같습니다. 위의 코드는 모든 내부 요소를 중심 에 배치하지만 (중복 요소 는 제외) OP는 다른 내부 요소가 아닌 특정 요소 만 가운데에 배치하려고 합니다. 따라서 @Warface answer 두 번째 방법이 더 적합하지만 여전히 수직 중심이 필요합니다.
.flex-container{
position: relative;
/* Other styling stuff */
width: 400px;
height: 200px;
background-color: #3498db;
}
.inner-element{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
/* or 3d alternative if you will add animations (smoother transitions) */
transform: translate3d(-50%,-50%,0);
/* Other styling stuff */
width: 100px;
height: 100px;
background-color: #f1c40f;
}<div class="flex-container">
<p>Other inner elements like this follows the normal flow.</p>
<div class="inner-element"></div>
</div>답변
CSS
body{
text-align:center;
}
.divWrapper{
width:960px //Change it the to width of the parent you want
margin: 0 auto;
text-align:left;
}HTML
<div class="divWrapper">Tada!!</div>이것은 div를 중심에 두어야합니다
2016-HTML5 + CSS3 방법
CSS
div#relative{
position:relative;
}
div#thisDiv{
position:absolute;
left:50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}HTML
<div id="relative">
<div id="thisDiv">Bla bla bla</div>
</div>피들
답변
text-align:center; 부모 div에서 트릭을 수행해야합니다.
답변
특정 아동만을 중앙에 배치하려면 :
.parent {
height: 100px;
background-color: gray;
position: relative;
}
.child {
background-color: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 20px;
height:20px;
margin: auto;
}<div class="parent">
<span class="child">hi</span>
</div> 또는 flex를 사용할 수도 있지만 모든 어린이를 중심으로합니다.
.parent {
height: 100px;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
}
.child {
background-color: white;
}<div class="parent">
<span class="child">hi</span>
</div>답변
부트 스트랩 플렉스 클래스 이름을 다음과 같이 사용할 수 있습니다.
<div class="d-flex justify-content-center">
// the elements you want to center
</div>내부의 많은 요소에서도 작동합니다.
답변
div가 고정 너비입니까 아니면 유체 너비입니까? 어느 쪽이든, 유체 너비에는 다음을 사용할 수 있습니다.
#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}또는 부모 div를 text-align:center;및 자식 div를 로 설정할 수 text-align:left;있습니다.
그리고 left:50%;단지 사업부로 설정되어 전체 페이지에 따라 중심을 position:absolute;. div를 설정하면 left:50%;부모 div의 너비를 기준으로해야합니다. 고정 너비의 경우 다음을 수행하십시오.
#parent {
width:500px;
}
#child {
left:50%;
margin-left:-100px;
width:200px;
}