html - 有没有办法让项目在布局中间居中

问题描述

我试图将一个项目置于布局的中间，同时，如果可能的话，如果需要，可以通过小的 CSS 调整来控制它的位置。在我的布局页面中，我无法弄清楚为什么我想要在屏幕中间水平和垂直的项目都位于屏幕的左侧。我知道问题出在我的布局中，我似乎无法找出问题所在。下面是我的布局的基本版本，其中包含我可以尝试居中的项目。

* {
    margin: 0;
    padding: 0;
}

html, body {
    width:100%;
    height:100%;
    margin:0;
}

.layoutPage {
    min-height: 95%;
}

/***********************************
 ************Header*****************
 ***********************************/

.headerImage {
    background: blue;
    padding: 1.75em;
    margin: 0;
    padding: 0;
    background-color: blue;
    height: 3.5em; /*4em*/
}

/***********************************
 ***************Body****************
 ***********************************/

.bodyContainer {
    overflow: auto;
    padding-bottom: 1em;
    font-family: Verdana;
    font-size: 12px; /*12px*/
}

.appRoundedShadow {
display: inline-block;
height: auto

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div class="layoutPage">
        <div class="headerImage">            
        </div>
        <br />
        <div class="bodyContainer">
            <div class="appRoundedShadow">
		<div class="container">
			<div style="width: 450px; margin: 0 auto; border: 1px solid;">

                    <div style="margin: 2px; border-bottom-style: solid; border-bottom-width: thin; background-color: blue; text-align: center;">
                        <span style="font-weight: bold; font-size: 19px; color: #fff">Report</span>
                    </div>
                    <div style="margin: 1em">
                        <span style=""><input type="text" name="year"><br></span>

                        <input type="submit" id="executeReport" name="SubmitBtn" class="submitButton" value="Execute Report"/>
                    </div>
                    
                    
                    <div style="margin-left: 1em">
                        <p>It may take 2 or more minutes to complete your request.<br/></p>
                    </div>

                </div>
		</div>
	</div>
        </div>
    </div>
    <div class="footer">
        <hr />
        <span class="footerText">Copyright © </span>
    </div>
</body>
</html>

我想将整个 appRoundedShadow div 居中

标签： htmlcss

html - 有没有办法让项目在布局中间居中

问题描述

解决方案

推荐阅读