How to put the text at the center of inner div?


Tags: html,css

Problem :

What i want to get is the following image.

enter image description here

There are two divs. The inner div is at the center of the outer div, and text box1 is at the center of inner div.

The css code can't achieve the target.

div.father {
    align-items: center;
    border: 1px solid black;
    display: flex;
    height: 300px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
}

div.son {
    border: 1px solid black;
    height: 100px;
    width: 100px;
}

<div class="father">
  <div class="son">box1</div>
</div>

enter image description here

How to put the box1 at the center of div.son?



Solution :

You can use flex box. Here's my fiddle.

div.father {
  border: 1px solid black;
  align-items: center;
  justify-content: center;
  display: flex;
  height: 300px;
  width: 300px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  /**/
  margin-top: 100px;/*only for snippet spacing*/
}
div.son {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  align-items: center;
  justify-content: center;
  display: flex;
}
<div class="father">
  <div class="son">box1</div>
</div>


    CSS Howto..

    Css - how hide third element td?

    How do I get a value from the style element?

    How to get divs 100% of browser using css?

    How to enforce image max-width when using bootstrap 3?

    How to center align vertically the container in bootstrap

    How can I Highlight links only in Blog Posts with Mouseover?

    how to change color of selected menu in css or jquery [closed]

    How to use div classes to get my blocks to line up?

    Ionic2 : How to set up css in single page

    How to exclude the container from this javascript code?

    CSS - How can I set the content to attr() but when attribute isn't available, set it to 0 or another?

    A plugin or tool to show what elements on a page are effecting other elements?

    How do I add a custom CSS image to the target background behind a given layer of text in Squarespace?

    How to add labels for multiple textboxes inside 1 li element

    how to remove white space in justified css

    Angular.js: How to change div width based on user input

    Need the background to change when the mouse goes over the selected tab. How?

    how do I use standard GWT CSS style themes from non-GWT pages?

    How to add a shadow for underline (bottom border) in css

    Is this how CSS LESS and SimpLESS work? [closed]

    How to use CssStyleCollection for a UserControl?

    How to change the font family of Highchart to Bootstrap css default font family

    How do I get nested divs to be same height and expand to the largest of the heights?

    How do you put in percentage based margin to a CSS grid?

    How to fade in and fade out text on a timer using css animations

    How to expand textarea to fit text vertically and horizontally?

    How to make vertical text change into horizontal text in css?

    How to prevent content from being pushed down on appearance of floating menu in mobile display

    How to specify size of thumbnails for photos that are hosted externally?

    A text shows up smoothly when hovering thumbnails. Is this a jQuery plugin or just CSS?