Question

我目前正试图让div在我的页面中间居中。我把它放在中间，但是当我调整页面大小时我遇到了问题。当我尽可能地使窗口宽度变小时，div会离开页面左侧。这是一个代表我所拥有的jsfiddle：

这是一些css：

public class UserServiceImpl implements UserService, UserDetailsService{

    @Autowired
    private UserDAO userDao;

    @Autowired
    private UserVo userVo;

    @Override
    public int insert(UserVo userVo) {
        return userDao.insert(userVo);
    }

    @SuppressWarnings("unchecked")
    @Override
    public List<UserVo> list(UserVo userVo) {
        return (List<UserVo>) userDao.select(userVo);
    }

    public List<String> listUserRoles(UserVo userVo) {
        return (List<String>) userDao.listUserRoles(userVo);
    }

    @SuppressWarnings("rawtypes")
    @Override
    public Map select(UserVo userVo) {
        return userDao.select(userVo);
    }


    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        userVo.setUsername(username);

        @SuppressWarnings({ "rawtypes", "unchecked" })
        Map result = new HashMap(userDao.select(userVo));

        List<String> userRoles = userDao.listUserRoles(userVo);
        String sRoles = StringUtils.join(userRoles, ",");
        List<GrantedAuthority> authorities = new ArrayList<GrantedAuthority>();

        for(String role : userRoles){
            authorities.add(new SimpleGrantedAuthority(role));
        }

        userVo.setUsername(result.get("username").toString());
        userVo.setPassword(result.get("password").toString());
        userVo.setEnabled(result.get("enabled").toString());
        userVo.setUserAuthorities(authorities);

        //return new LoginVo(result.get("username").toString(), result.get("password").toString(), AuthorityUtils.commaSeparatedStringToAuthorityList(sRoles));
        return userVo;
    }

}

现在，如果您查看它并调整窗口大小以使其尽可能小，您可以看到div向左移动。如何让它停在页面边缘？没有使用margin auto我找不到办法。有什么建议吗？

Answer 1

卸下：

margin-left: -100px;
margin-top: -30px;

将transform: translate(-50%);应用于wrapper课程。

对于像chrome这样的webkit浏览器，

-webkit-transform: translate(-50%);。

<强> Updated Fiddle

Answer 2

您想要设置一些CSS属性。margin: auto; width: ;将宽度设置为所需的宽度/百分比。它会自动使左侧和右侧的余量相等。

Answer 3

所以我想你想要this push-to-right-instead solution或this resize-instead solution。

两者都涉及将实际元素包装在容器中：

<div class="container">
  <div class="wrapper">

  </div>
</div>

使用text-align水平居中：

.container{
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -30px;
    position:fixed;
    text-align: center;
}
.wrapper{
  ...
  display: inline-block;
}

在调整页面大小的页面中间居中div

3 个答案: