Align text inside div vertically and horizontally

Question

How do align the text inside a div both horizontally and vertically? I am able to align horizontally with text-align: center. But, vertical-align does not work.

<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<head>
    <style>
        .blocks {
          width: 200px;
          height: 100px;
          border: 1px solid black;
          text-align: center;
          vertical-align: center;
        }
        #a1 {
          margin: 0 auto;
          margin-top: 40px;
        }
        #a2 {
          float: left;
          margin-left: 25%;
        }
        #a3 {
          float: right;
          margin-right: 25%;
        }
        #a4 {
          margin: 10% auto 0;
        }
    </style>
</head>
<body>
    <div id="container">
    <div class="blocks" id="a1">some text</div>
    <div class="blocks" id="a2">some text</div>
    <div class="blocks" id="a3">some text</div>
    <div class="blocks" id="a4">some text</div>
    </div>
</body>

Thank you.

Check this [**Question**](http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block). This question has been asked hundreds of times. Please do some research before posting a question. — Mohammad Usman, Dec 28 '16 at 06:52

score 0 · Answer 1 · answered Dec 28 '16 at 06:53

use css3 flexbox concept

set parent display:flex
set child margin:auto

it works fine ,I'm added the snippet below.

<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<head>
    <style>
        .blocks {
          width: 200px;
          height: 100px;
          border: 1px solid black;
          text-align: center;
          vertical-align: center;
          display:flex;
        }
        #a1 {
          margin: 0 auto;
          margin-top: 40px;
        }
        #a2 {
          float: left;
          margin-left: 25%;
        }
        #a3 {
          float: right;
          margin-right: 25%;
        }
        #a4 {
          margin: 10% auto 0;
        }
      span{
        margin:auto;}
    </style>
</head>
<body>
    <div id="container">
    <div class="blocks" id="a1"><span>some text</span></div>
    <div class="blocks" id="a2"><span>some text</span></div>
    <div class="blocks" id="a3"><span>some text</span></div>
    <div class="blocks" id="a4"><span>some text</span></div>
    </div>
</body>

score 0 · Accepted Answer · answered Dec 28 '16 at 06:54

You can use CSS Flexbox. Make your .blocks a flex container & apply flex alignment properties align-items & justify-content. Like:

.blocks {
  display: flex; /* Flex Container */
  align-items: center; /* Gives Vertical Alignment */
  justify-content: center; /* Gives Horizontal Alignment */
}

Have a look at the snippet below (use full screen mode):

.blocks {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}
#a1 {
  margin: 0 auto;
  margin-top: 40px;
}
#a2 {
  float: left;
  margin-left: 25%;
}
#a3 {
  float: right;
  margin-right: 25%;
}
#a4 {
  margin: 10% auto 0;
}

<body>
    <div id="container">
    <div class="blocks" id="a1">some text</div>
    <div class="blocks" id="a2">some text</div>
    <div class="blocks" id="a3">some text</div>
    <div class="blocks" id="a4">some text</div>
    </div>
</body>

Hope this helps!

Align text inside div vertically and horizontally

2 Answers2