Question

有没有办法让.polygon_container和.polygon纵向和横向居中？还有可能使其大小响应，如下面的<img>标记？

http://cichyone.linuxpl.eu/ranestwen/ex/

我已尝试过text-align，margin auto等，但没有任何作用。

当我使用margin-left和margin-top将其设置在中间时，它仅适用于一种分辨率。

Answer 1

您可以轻松使用flexbox。

object.has("email")

Answer 2

您可以使用tansform：

将多边形div居中

我创建了以下HTML：

import it.unisa.dia.gas.crypto.circuit.Circuit;
import it.unisa.dia.gas.crypto.circuit.DefaultCircuit;
import it.unisa.dia.gas.crypto.jpbc.fe.abe.gghvv13.engines.GGHVV13KEMEngine;
import it.unisa.dia.gas.crypto.jpbc.fe.abe.gghvv13.generators.GGHVV13KeyPairGenerator;
import it.unisa.dia.gas.crypto.jpbc.fe.abe.gghvv13.generators.GGHVV13ParametersGenerator;
import it.unisa.dia.gas.crypto.jpbc.fe.abe.gghvv13.generators.GGHVV13SecretKeyGenerator;
import it.unisa.dia.gas.crypto.jpbc.fe.abe.gghvv13.params.*;
import it.unisa.dia.gas.crypto.kem.KeyEncapsulationMechanism;
import it.unisa.dia.gas.plaf.jpbc.pairing.PairingFactory;
import org.bouncycastle.crypto.AsymmetricCipherKeyPair;
import org.bouncycastle.crypto.CipherParameters;
import org.bouncycastle.crypto.InvalidCipherTextException;

import java.security.SecureRandom;
import java.util.Arrays;

import static it.unisa.dia.gas.crypto.circuit.Circuit.Gate.Type.*;
import static it.unisa.dia.gas.crypto.circuit.DefaultCircuit.DefaultGate;
import static org.junit.Assert.*;

/**
* @author Angelo De Caro (jpbclib@gmail.com)
*/
public class GGHVV13KEM {

   public GGHVV13KEM() {
   }


   public AsymmetricCipherKeyPair setup(int n) {
       GGHVV13KeyPairGenerator setup = new GGHVV13KeyPairGenerator();
       setup.init(new GGHVV13KeyPairGenerationParameters(
               new SecureRandom(),
               new GGHVV13ParametersGenerator().init(
                       PairingFactory.getPairing("D:/mrstar/Documents/Java Libs/2.0/params/mm/ctl13/toy.properties"),
                       n).generateParameters()
       ));

       return setup.generateKeyPair();
   }

   public byte[][] encaps(CipherParameters publicKey, String w) {
       try {
           KeyEncapsulationMechanism kem = new GGHVV13KEMEngine();
           kem.init(true, new GGHVV13EncryptionParameters((GGHVV13PublicKeyParameters) publicKey, w));

           byte[] ciphertext = kem.process();

           assertNotNull(ciphertext);
           assertNotSame(0, ciphertext.length);

           byte[] key = Arrays.copyOfRange(ciphertext, 0, kem.getKeyBlockSize());
           byte[] ct = Arrays.copyOfRange(ciphertext, kem.getKeyBlockSize(), ciphertext.length);

           return new byte[][]{key, ct};
       } catch (InvalidCipherTextException e) {
           e.printStackTrace();
           fail(e.getMessage());
       }
       return null;
   }

   public CipherParameters keyGen(CipherParameters publicKey, CipherParameters masterSecretKey, Circuit circuit) {
       GGHVV13SecretKeyGenerator keyGen = new GGHVV13SecretKeyGenerator();
       keyGen.init(new GGHVV13SecretKeyGenerationParameters(
               (GGHVV13PublicKeyParameters) publicKey,
               (GGHVV13MasterSecretKeyParameters) masterSecretKey,
               circuit
       ));

       return keyGen.generateKey();
   }

   public byte[] decaps(CipherParameters secretKey, byte[] ciphertext) {
       try {
           KeyEncapsulationMechanism kem = new GGHVV13KEMEngine();

           kem.init(false, secretKey);
           byte[] key = kem.processBlock(ciphertext);

           assertNotNull(key);
           assertNotSame(0, key.length);

           return key;
       } catch (InvalidCipherTextException e) {
           e.printStackTrace();
           fail(e.getMessage());
       }

       return null;
   }


   public static void main(String[] args) {
       int n = 4;
       int q = 3;
       Circuit circuit = new DefaultCircuit(n, q, 3, new DefaultGate[]{
              new DefaultGate(INPUT, 0, 1),
              new DefaultGate(INPUT, 1, 1),
              new DefaultGate(INPUT, 2, 1),
              new DefaultGate(INPUT, 3, 1),

              new DefaultGate(AND, 4, 2, new int[]{0, 1}),
              new DefaultGate(OR, 5, 2, new int[]{2, 3}),

              new DefaultGate(AND, 6, 3, new int[]{4, 5}),
      });

      GGHVV13KEM kem = new GGHVV13KEM();

      // Setup
      AsymmetricCipherKeyPair keyPair = kem.setup(n);

      // Keygen
      CipherParameters secretKey = kem.keyGen(keyPair.getPublic(), keyPair.getPrivate(), circuit);

      // Encaps/Decaps for satisfying assignment
      String assignment = "1101";
      byte[][] ct = kem.encaps(keyPair.getPublic(), assignment);
      assertEquals(true, Arrays.equals(ct[0], kem.decaps(secretKey, ct[1])));

      // Encaps/Decaps for not-satisfying assignment
      assignment = "1001";
      ct = kem.encaps(keyPair.getPublic(), assignment);
      assertEquals(false, Arrays.equals(ct[0], kem.decaps(secretKey, ct[1])));
  }

}

为此，我使用这个css：

<div class="polygon_container">
    <div class="polygon">
        <h1>hello</h1>
    </div>
</div>

希望这是一个适合你的解决方案。

Answer 3

只需使用以下css

.slider .polygon_container {
    position: absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    margin: auto;
    color: white;
    height: 500px;
    text-align: center;
    width: 500px;
    z-index: 99999;
}
.slider .polygon {
    color: white;
    height: 500px;
    margin: auto;
    position: absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    width: 500px;
    z-index: 99999;
}

Answer 4

是的，这是可能的。试试这个。

.polygon_container {
    position: absolute;
    height: 500px;
    width: 500px;
    top: 50%;left: 50;
    margin-left: -250px;
    margin-top: -250px;
}

＆＃13;

html, body {
  height: 100%;width: 100%;
  margin: 0;padding: 0;
}

.container {
  height: 100%;width: 100%;
  background: url('http://cichyone.linuxpl.eu/ranestwen/ex/assets/img/slider1/1.png') no-repeat;
  background-size: cover;
}

.polygon_container {
  position: absolute;
  height: 100px;
  width: 100px;
  left: 50%;top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

.polygon_container .polygon {
  background: #fff;
  height: 100%;
  width: 100%;
  
  transform: rotate(45deg);
}

＆＃13;

<div class="container">
  <div class="polygon_container">
    <div class="polygon"></div>
  </div>
</div>

＆＃13;

Answer 5

.slider .polygon_container {
    width: 500px;
    height: 500px;
    position: absolute;
    z-index: 99999;
    text-align: center;
    color: white;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

更新了您的课程。

垂直和水平居中div

5 个答案: