Html 如何将div与真实和水平的中心对齐_Html_Css

Html 如何将div与真实和水平的中心对齐

html css

Html 如何将div与真实和水平的中心对齐,html,css,Html,Css,我要将div与中心对齐像这样我试过页边空白顶部，垂直对齐但它们也不起作用我还将左侧设置为小于0px 但内部div仍然是左侧的0px 如果我想要上图中的div 如何修改css使其与上图相同 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div { border:solid; } #outer { position:absolute;

我要将div与中心对齐

像这样

我试过页边空白顶部，垂直对齐

但它们也不起作用

我还将左侧设置为小于0px

但内部div仍然是左侧的0px

如果我想要上图中的div

如何修改css使其与上图相同

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div
{
    border:solid;
}
#outer
{
    position:absolute;
    height:100px;
    width:50px;
    left:50px;
    top:50px;
}
#inner
{
    background:white;
    height:20%;
    width:120%;
    left:-10px;
    margin-top:auto;
    margin-buttom:auto;
    vertical-align:middle;
}
</style>
</head>
<body>

<div id="outer">
    <div id="inner">abc</div>
</div>
</body>
</html>


div
{
边框：实心；
}
#外
{
位置：绝对位置；
高度：100px；
宽度：50px；
左：50px；
顶部：50px；
}
#内在的
{
背景：白色；
身高：20%；
宽度：120%；
左：-10px；
页边顶部：自动；
边距按钮：自动；
垂直对齐：中间对齐；
}
abc

试试这个-

检查这个

在不使用JavaScript的情况下垂直对齐元素的唯一灵活方法是将其放入表格单元格。

您可以尝试以下方法：

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            html { height:100%; width:100%; }
            body { background-color: yellow; margin:0; padding:0; }
            #outer { width:100%; min-height:100%; background-color:red; position:absolute; }
            #inner { width:500px; height:500px; background-color:blue; position:relative; margin:10% auto; }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
            </div>
        </div>
    </body>
</html>


html{高度：100%；宽度：100%；}
正文{背景色：黄色；边距：0；填充：0；}
#外部{宽度：100%；最小高度：100%；背景色：红色；位置：绝对；}
#内部{宽度：500px；高度：500px；背景色：蓝色；位置：相对；边距：10%自动；}

祝你好运

您可以尝试以下方法：

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            html { height:100%; width:100%; }
            body { background-color: yellow; margin:0; padding:0; }
            #outer { width:100%; min-height:100%; background-color:red; position:absolute; }
            #inner { width:500px; height:500px; background-color:blue; position:relative; margin:10% auto; }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
            </div>
        </div>
    </body>
</html>


html{高度：100%；宽度：100%；}
正文{背景色：黄色；边距：0；填充：0；}
#外部{宽度：100%；最小高度：100%；背景色：红色；位置：绝对；}
#内部{宽度：500px；高度：500px；背景色：蓝色；位置：相对；边距：10%自动；}

祝你好运

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            html { height:100%; width:100%; }
            body { background-color: yellow; margin:0; padding:0; }
            #outer { width:100%; min-height:100%; background-color:red; position:absolute; }
            #inner { width:500px; height:500px; background-color:blue; position:relative; margin:10% auto; }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
            </div>
        </div>
    </body>
</html>