Question

我想使用wrapper将height置于父{div}元素内windows，view height等于CSS <div class="main-header"> <div class="wrapper">center div</div> </div>。

HTML

.main-header{
color: #fff;
background: #16a8ec;
padding: 10px;
height: 100vh;
position: relative; }

.wrapper{
position: absolute;
left: 0px;
right: 0px;
transform: translate(0px, 50%); /* i used transform but it doesn't work */
-webkit-transform: translate(0px, 50%); /* i used transform but it doesn't work */ }

CSS

from functools import wraps
import time
from requests.exceptions import RequestException
from socket import timeout

class Retry(object):
    """Decorator that retries a function call a number of times, optionally
    with particular exceptions triggering a retry, whereas unlisted exceptions
    are raised.
    :param pause: Number of seconds to pause before retrying
    :param retreat: Factor by which to extend pause time each retry
    :param max_pause: Maximum time to pause before retry. Overrides pause times
                      calculated by retreat.
    :param cleanup: Function to run if all retries fail. Takes the same
                    arguments as the decorated function.
    """
    def __init__(self, times, exceptions=(IndexError), pause=1, retreat=1,
                 max_pause=None, cleanup=None):
        """Initiliase all input params"""
        self.times = times
        self.exceptions = exceptions
        self.pause = pause
        self.retreat = retreat
        self.max_pause = max_pause or (pause * retreat ** times)
        self.cleanup = cleanup

    def __call__(self, f):
        """
        A decorator function to retry a function (ie API call, web query) a
        number of times, with optional exceptions under which to retry.

        Returns results of a cleanup function if all retries fail.
        :return: decorator function.
        """
        @wraps(f)
        def wrapped_f(*args, **kwargs):
            for i in range(self.times):
                # Exponential backoff if required and limit to a max pause time
                pause = min(self.pause * self.retreat ** i, self.max_pause)
                try:
                    return f(*args, **kwargs)
                except self.exceptions:
                    if self.pause is not None:
                        time.sleep(pause)
                    else:
                        pass
            if self.cleanup is not None:
                return self.cleanup(*args, **kwargs)
        return wrapped_f

请帮助我们，谢谢。

Answer 1

使用flexbox：

.main-header{
  color: #fff;
  background: #16a8ec;
  padding: 10px;
  height: 100vh;
  position: relative;
  /* Flexbox */
  display: flex;
  align-items: center; 
}

.wrapper{
  /* your wrapper style */
}

绝对位置：

.main-header{
  color: #fff;
  background: #16a8ec;
  padding: 10px;
  height: 100vh;
  position: relative; 
}

.wrapper{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Answer 2

你想要这样的东西吗？

更改：

html和body元素应该设置为窗口的高度（视口），所以我使用属性height:100vh，然后默认情况下将body设置为8px，所以我使用了属性margin:0px。
要将div居中，只需使用text-align: center作为课程main-header的div。

html,
body {
  height: 100vh;
  margin: 0px;
}

.main-header {
  color: #fff;
  background: #16a8ec;
  padding: 10px;
  box-sizing: border-box;
  height: 100vh;
  position: relative;
  text-align: center;
}

.wrapper {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

<div class="main-header">
  <div class="wrapper">center div</div>
</div>

Answer 3

选中此处：已添加top:46%和left:46% ，您也可以进行其他操作。

＆＃13;

.main-header{
color: #fff;
background: #16a8ec;
padding: 10px;
height: 100vh;
position: relative; }

.wrapper{
position: absolute;
top:46%;
left: 46%;
transform: translate(0px, 50%); /* i used transform but it doesn't work */
-webkit-transform: translate(0px, 50%); /* i used transform but it doesn't work */ }

＆＃13;

<div class="main-header">
   <div class="wrapper">center div</div>
</div>

＆＃13;

Answer 4

您只需将top: 0; bottom: 0添加到.wrapper，就像这样：

＆＃13;

.main-header{
color: #fff;
background: #16a8ec;
padding: 10px;
height: 100vh;
position: relative; }

.wrapper{
position: absolute;
left: 0px;
right: 0px;
transform: translate(0px, 50%); /* i used transform but it doesn't work */
-webkit-transform: translate(0px, 50%); /* i used transform but it doesn't work */ 
text-align: center;
top: 0;
bottom: 0;
}

＆＃13;

<div class="main-header">
   <div class="wrapper">center div</div>
</div>

＆＃13;

您还可以查看此Fiddle

Answer 5

只需将display: table提供给父母，将display: table-cell; vertival-align: middle;提供给适合您的儿童。

工作示例。

<!DOCTYPE html>
<html>

<head>
    <style>
        .main-header {
            color: #fff;
            background: #16a8ec;
            padding: 10px;
            height: 100vh;
            width: 100%;
            display: table;
        }
        
        .wrapper {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="main-header">
        <div class="wrapper">center div</div>
    </div>
</body>

</html>

如何垂直居中父div中的元素

5 个答案: