텍스트/이미지 상하좌우 중앙정렬

 

 

HTML과 CSS만을 이용하여 상하좌우 중앙정렬 하기.

 

* 텍스트 HTML

 

<!-- 텍스트 -->
 
 
 
<div class="box">
   <div class="vc"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br>
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
   <!-- vc --> 
</div>
 

 

- CSS

 

.box{
  width: 100%;
  max-width: 640px;
  height: 240px;
  margin: 2rem auto;
  background: #eee;
}
 
.vc{
 text-align: center;
 position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
 

 

 

* 이미지 HTML

 

<!-- 이미지 -->
 
<div class='img'>
    <span></span>
    <img src="/" class="photo"/>
</div>
 

 

- CSS

 

.img {
  display: block;
  text-align: center;
  display: block;
  text-align: center;
  vertical-align: middle;
  border: 4px solid #dddddd;
  padding: 4px;
  width: 360px;
  height: 240px;
  margin: 2rem auto;}
  .img * {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
    .img .photo {
    height: 120px;
    width: auto;
    max-width: 100%;
    max-height: 100%; 
}