How to align a
to the middle (horizontally/width) of the page [duplicate]

后端未结

关注

 27  1644

走了就别回头了

相关标签:

27条回答

北荒

2020-11-22 01:26
Centering without specifying div width:
```
body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}
```
This is something like <center> tag does, except:
- all direct inline childs elements (eg. <h1>) of <center> will also positioned to center
- inline-block element can have different size (comapred to display:block setting) according to browser defaults
0 讨论(0)
发布评论:

提交评论
- 加载中...

天涯浪人

2020-11-22 01:26

Use the below code for centering the div box:

.box-content{
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 800px;
    height: 100px;
    background-color: green;
}

<div class="box-content">
</div>

0 讨论(0)

孤街浪徒

2020-11-22 01:27
position: absolute and then top:50% and left:50% places the top edge at the vertical center of the screen, and the left edge at the horizontal center, then by adding margin-top to the negative of the height of the div, i.e., -100 shifts it above by 100 and similarly for margin-left. This gets the div exactly in the center of the page.
```
#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}
```
```
<div id="outPopUp"></div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
盖世英雄少女心

2020-11-22 01:29
This can be easily achieved via flex container.
```
.container{
 width: 100%;
 display: flex;
 height: 100vh;
 justify-content: center;
}

.item{
 align-self: center;
}
```
Preview Link
0 讨论(0)
发布评论:

提交评论
- 加载中...

一向

2020-11-22 01:29

Get the width of the screen.
Then make margin left 25%
Make margin right 25%

In this way the content of your container will sit in the middle.

Example: suppose that container width = 800px;

<div class='container' width='device-width' id='updatedContent'>
    <p id='myContent'></p>
    <contents></contents>
    <contents></contents>
</div>

if ($("#myContent").parent === $("updatedContent"))
{
    $("#myContent").css({
        'left': '-(device-width/0.25)px';
        'right': '-(device-width/0.225)px';
    });
}

0 讨论(0)

眼角桃花

2020-11-22 01:30
```
<body>
    <div style=" display: table; margin: 250 auto;">
        In center
    </div>
</body>
```
If you want to change the vertical position, change the value of 250 and you can arrange the content as per your need. There is no need to give the width and other parameters.
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 3 4 5 下一页

热议问题

How to align a to the middle (horizontally/width) of the page [duplicate]

How to align a
to the middle (horizontally/width) of the page [duplicate]