我有一些布局设计，

我想将带有 id:#middle 的 div 居中对齐。

我把这个 div 的背景颜色设置为绿色。

我还想保持当前的布局状态，如滚动条、大小等，...

实现它的最佳方法是什么？

我附上了我的代码片段和 jsfiddle，如下所示。

JSFiddles:https://jsfiddle.net/crisply/yr8he13g/8/

请引用这个并给我一些建议。

提前谢谢你。

    

        

            

                Logo
            

            

                
Title

                
Description

                
Informations

            

        

        

            Menu
        

    



    

        

            contents
       

    



    

        

            Copyright © 2015 eZRobotics. All rights reserved.
        


        

            
                
                    
                        
admin

                    
                    
                        logout btn
                    
                
            
        

    
    

这是CSS

html, body {
    /*font-size: 12px;*/
    font-family:'Tahoma', 'Segoe UI', Verdana !important;
}
thân hình {
    height:100%;
}
div {
    box-sizing: border-box;
}
/* -- header ----------------------------------------------- */
 #header {
    vị trí: tuyệt đối;
    left:0px;
    right:0;
    top:0;
    height:90px;
    /* TOP height + menu height*/
}
#top {
    height: 60px;
}
#logo {
    padding: 15px;
    height: 30px;
    width: 200px;
}
/* Title & sampling information */
 #pageInfo {
    vị trí: tuyệt đối;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    margin: 10px;
    căn chỉnh văn bản: ở giữa;
    vertical-align:central;
}
#pageTitle {
    font-size: 23px;
    font-weight: đậm;
    font-family: Tahoma, 'Segoe UI', Verdana;
}
#pageDesc {
    font-size: 14px;
    color: #666;
}
#samplingInfo {
    vị trí: tuyệt đối;
    bottom: 0px;
    right: 0px;
    căn chỉnh văn bản: phải;
    font-size: 13px;
}
#menu {
    height: 30px;
    background-color: #666666;
    căn chỉnh văn bản: ở giữa;
}
/* -- ccontent ----------------------------------------------- */
 #content {
    top:90px;
    /* header height */
    bottom:24px;
    /* Footer height */
}
/* content */
 #left {
    vị trí: tuyệt đối;
    top: inherit;
    /* header height */
    bottom: inherit;
    left:0;
    width:200px;
    padding: 10px 10px 10px 10px;
}
#right {
    overflow:auto;
    overflow-y: scroll;
    vị trí: tuyệt đối;
    top: inherit;
    /* header height */
    bottom: inherit;
    left:200px;
    right:0;
    padding: 10px 10px 10px 0px;
}
#middle {
    overflow-y: scroll;
    vị trí: tuyệt đối;
    top: inherit;
    bottom: inherit;
    left:0;
    right:0;
    padding: 10px 10px 10px 10px;
    max-width: 940px;
    màu nền: xanh lá cây;
}
/* -- footer ----------------------------------------------- */
 #footer {
    vị trí: tuyệt đối;
    left:0px;
    right:0;
    bottom:0;
    height:24px;
    line-height: 24px;

    overflow:hidden;
    background-color: #666666;
    color: #eee;
    font-size: 13px;
}
#copyright {
    căn chỉnh văn bản: phải;
    vị trí: tuyệt đối;
    top: 0px;
    left: 0px;
    padding-left: 5px;
    /*background-color: blue;*/
}
#loginState {
    vị trí: tuyệt đối;
    top: 0px;
    right: 0px;
    /*background-color: green;*/
}
#username {
    border: 1px solid #C5C5C5;
    height: 18px !important;
    line-height: 18px;
    font-size:13px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 5px;
}
/* Table */
 .tbl {
    width:100%;
    height:100%;
    /*border:1px solid #000;*/
    border-collapse:collapse;
}
.tbl th, td {
    /* border:1px solid #000; */
}
.tbl th {
    background-color:#eee;
}

1 Câu trả lời

CSS

#middle {
  overflow-y: scroll;
  vị trí: tuyệt đối;
  top: inherit;
  bottom: inherit;
  left: 0;
  phải: 0;
  padding: 10px 10px 10px 10px;
  max-width: 940px;
  màu nền: xanh lá cây;
  margin: 0 auto;
}

DEMO

关于html - 如何对齐居中的div元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29384009/