Best way to center a
on a page vertically and horizontally? [duplicate]

前端未结

关注

 30  2159

借酒劲吻你

相关标签:

30条回答

耶瑟儿～

2020-11-21 05:17
My prefered way to center a box both vertically and horizontally, is the following technique :

The outer container
- should have display: table;
The inner container
- should have display: table-cell;
- should have vertical-align: middle;
- should have text-align: center;
The content box
- should have display: inline-block;
- should re-adjust the horizontal text-alignment to eg. text-align: left; or text-align: right;, unless you want text to be centered
The elegance of this technique, is that you can add your content to the content box without worrying about its height or width!

Demo
```
body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
```
```
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        You can put anything here!
     </div>
   </div>
</div>
```
See also this Fiddle!

EDIT

Yes, I know you can achieve more or less the same flexibility with transform: translate(-50%, -50%); or transform: translate3d(-50%,-50%, 0);, the technique I'm proposing has far better browser support. Even with browsers prefixes like -webkit, -ms or -moz, transform doesn't offer quite the same browser support.

So if you care about older browsers (eg. IE9 and below), you should not use transform for positioning.
0 讨论(0)
发布评论:

提交评论
- 加载中...

猫巷女王i

2020-11-21 05:18

I was looking at Laravel's view file and noticed that they centered text perfectly in the middle. I remembered about this question immediately. This is how they did it:

<html>
<head>
    <title>Laravel</title>

    <!--<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>-->

    <style>
        .container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: table;

        }

        .inside {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }


    </style>
</head>
<body>
    <div class="container">
            <div class="inside">This text is centered</div>
    </div>
</body>

Result looks so:

enter image description here

0 讨论(0)

孤街浪徒

2020-11-21 05:19

One more method (bulletproof) taken from here utilizing 'display:table' rule:

Markup

<div class="container">
  <div class="outer">
    <div class="inner">
      <div class="centered">
        ...
      </div>
    </div>
  </div>
</div>

CSS:

.outer {
  display: table;
  width: 100%;
  height: 100%;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.centered {
  position: relative;
  display: inline-block;

  width: 50%;
  padding: 1em;
  background: orange;
  color: white;
}

0 讨论(0)

迷失自我

2020-11-21 05:20
```
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
```
Explanation:

Give it an absolute positioning (the parent should have relative positioning). Then, the upper left corner is moved to the center. Because you don't know the width/height yet, you use css transform to translate the position relatively to the middle. translate(-50%, -50%) does reduce the x and y position of the upper left corner by 50% of width and height.
0 讨论(0)
发布评论:

提交评论
- 加载中...
一向

2020-11-21 05:20
This is the best code to centre the div bot horizontally and vertically
```
div
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦谈多话

2020-11-21 05:22
In case you know a defined sized for your div you could use calc.

Live example: https://jsfiddle.net/o8416eq3/

Notes: This works only if you hard coded the width and height of your ``div` in the CSS.
```
#target {
  position:fixed;
  top: calc(50vh - 100px/2);
  left: calc(50vw - 200px/2);
  width:200px;
  height:100px;
  background-color:red;
}
```
```
<div id='target'></div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 3 4 5 下一页

热议问题

Best way to center a on a page vertically and horizontally? [duplicate]

Best way to center a
on a page vertically and horizontally? [duplicate]